使用easyui-combobox生成下拉框时的总结（2）

通过学习easyui-combobox插件，我目前发现easyui-combobox和<select>有三点不一样：

1、<select>标签默认会把第一个<option>的文本内容作为默认值，如果要把其他的<option>值设为默认值，可以通过添加selected属性来实现，而easyui-combobox没有默认值；

2、<select>标签只能进行下拉选择操作，而easyui-combobx由于可以用<input>标签来模拟下拉框，所以自带模糊查询功能。当然，<select>也可以通过插件来增添用于模糊查询的输入框，比如基于BootStrap的select-picker插件；

3、<select>的分组是通过添加<optgroup label="groupName">来实现，在<optgroup>标签中插入本组的<option>，easyui-combobox的分组是通过groupField属性来指定用于分组的字段，这有点类似于单选按钮的name属性，值相同的被视为一组：

<lable><input type="radio" name="gender" value="M" />男</label>
<label><input type="radio" name="gender" value="F" />女</label>

那么，如何给easyui的下拉框设置默认值呢，我认为最简单的方法是在json文件中添加selected属性：

[
	{"id" : 1,"text" : "content1","selected" : true},
	{"id" : 2,"text" : "content2"},
	{"id" : 3,"text" : "content3"},
	{"id" : 4,"text" : "content4"},
	{"id" : 5,"text" : "content5"}
]

easyui-combobox支持的模糊查询有两种方式：一、（默认）从本地加载列表数据；二、从服务器加载列表数据，参见帮助文档中easyui-combobox下的mode属性，默认值是“local”，当把mode值设为“remote”时，用户输入的值将会被作为名为 'q' 的 http 请求参数发送到服务器，以获取新的数据。

如果要给列表数据分组，则需添加用于分组的字段：

[
  {"id" : 1,"text" : "content1","selected" : true,"group":"group1"},
  {"id" : 2,"text" : "content2","group":"group1"},
  {"id" : 3,"text" : "content3","group":"group2"},
  {"id" : 4,"text" : "content4","group":"group2"},
  {"id" : 5,"text" : "content5","group":"group3"},
  {"id" : 6,"text" : "content6","group":"group3"}
]

然后在JS代码中定义groupField属性：

$('#test').combobox({
	url : 'test.json',
	method : 'get',
	valueField : 'id',
	textField : 'text',
	groupField : 'group'
});

还可以对分组字段进行格式化，比如改变字体颜色为红色：

$('#test').combobox({
	url : 'test.json',
	method : 'get',
	valueField : 'id',
	textField : 'content',
	groupField : 'group',
	groupFormatter : function(group){
		return '<span style="color:red;">' + group + '</span>';
	}
});