JQuery专栏之八————静态组合框combobox控件及其事件和初值的设置。
8. 静态组合框combobox控件及其事件和初值的设置。
在EasyUI中，组合框控件（combo或combobox，也称下拉框）需要绑定一个数据源（source），以指定其选项的来源。通常，这个数据源可以是本地数据集（静态），也可以是远程服务器端符合规定格式数据集（动态）。
在定义本地数据源时一般采用JSON格式的数组。例如，有关性别的数据源可以定义如下：
var gendersource =[{"gender":"男"},{"gender":"女"}];
在这个JSON格式数据中，“性别”对应的列名为gender，选项为“男”和“女”两个。也可以采用多维数组定义组合框数据源。例如，有关城市组合框的数据源可定义如下：
var citysource=[{"cityid":"330100", "city":"杭州市"}, {"cityid":"330200", "city":"宁波市"}]
这里，每个城市选项中有两个列：cityid和city。
在定义数据源之后，需要设置组合框控件的相关属性。数据源由data属性指定，组合框显示的值和组合框返回的值分别由textField和valueField这两个关键属性指定。当valueField缺省时，由combobox("getValue")返回的值总是为空。
本例在一个表单中定义5个数据源及其相应的组合框控件，并为“学历”组合框和“城市”组合框分别定义一个onChange事件和onSelect事件。这两个事件在用户改变组合框的选项时都会被触发，其中onSelect事件可以提取当前选项对应的各个数据源值。
组合框的初值通过combobox('select')或combobox('setValue')两种方法进行设置。例如，下列语句将“学历（degree）”组合框的初值设置为第3个选项值（即“本科”）。
$('#degree').combobox('select',degreesource[2].degree);
组合框选项初值的赋值语句应当放在控件属性和事件定义之后。下面给出“城市”组合框的完整定义过程和方法：
①使用JSON格式定义数据源，存放在一个数组变量citysource中。
var citysource=[{"cityid":"330100","city":"杭州市"},{"cityid":"330200","city":"宁波市"},{"cityid":"330300","city":"温州市"},{"cityid":"330400","city":"嘉兴市"},{"cityid":"330500","city":"湖州市"},{"cityid":"330600","city":"绍兴市"},{"cityid":"330700","city":"金华市"},{"cityid":"330800","city":"衢州市"},{"cityid":"330900","city":"舟山市"},{"cityid":"331000","city":"台州市"},{"cityid":"331100","city":"丽水市"}];
②使用JS代码在$("#myFieldset1")中添加一个组合框控件，并在其style中指定位置和尺寸
$("#myFieldset1").append('<div style="position: absolute; top:300px; left:87px; width: 100px; padding-left: 4px;" id="city_div"><input class=“easyui-combobox" id="city" style="padding:0px 6px 0px 6px" /></div>');
③设置组合框的valueField和textField属性属性，使用data属性绑定选项数据源citysource。panelHeight为组合框下拉时显示的高度（按像数计算），选项较少时，可以为auto值。
$("#city").combobox({
width:160,
panelHeight: 120,
data: citysource,
valueField: 'cityid', //getValue组合框中提取出来的值
textField: 'city' //组合框显示的值
});
④编写组合框onSelect事件。当用户选中组合框的某个选项时，onSelect事件被触发。
$("#city").combobox({
onSelect: function(record) { //选中事件
if (record) {
alert(record.city+'---'+record.cityid+'---'+$("#city").combobox('getValue'));
}
}
});
⑤使用select方法设置组合框的初值，也可以用setValue方法设置初值。两者不同之处在于select方法可以触发onSelect事件，而setValue不会触发事件。
$('#city').combobox('select', citysource[0].city);
$('#city').combobox('setValue', citysource[0].city);
从上面代码可以发现，静态组合框的定义也是比较繁琐的。其实，组合框的定义过程也可以用一个函数实现，下面给出myComboField()自定义函数的参数及应用示例。
myComboField(id,parent,label,labelwidth,top,left,height,width,items,value,style)
这里，items为静态组合框的选项，各个选项之间用分号分隔。例如定义一个“职称”组合框：
myComboField('title', 'myFieldset1', '职称：', 70, 300, 16, 0, 120, '教授;副教授;讲师;助教;其它',
'副教授', 'autodrop');
这里，“职称”组合框共5个选项，其初值为“副教授”。style参数值autodrop表示组合框为非编辑状态，即点击组合框时就自动弹出其选项下拉框。myComboField()函数的具体代码见Easyui_functions.js文件。
相对于静态组合框，基于数据库的动态组合框的定义更为复杂些，有关内容将在第3章相关实例中介绍。