EasyUI的combobox使用总结

一，combobox的属性，事件和方法

combobox可以配置属性，绑定事件监听，调用方法，理解这几个概念之后会对combobox有更清晰的了解。

1，配置属性

combobox可以配置自己的属性，他的属性可以定义在<input>或<select>标签的data-options参数中，比如：

<select id="type" name="type" class="easyui-combobox" data-options="url:'getType.do',valueField:'id',textField:'text' ">

也可以在JavaScript代码中指定：

$('#type').combobox({url:'getType.do',valueField:'id',textField:'text'});

其中url，valueField，textField，都是combobox的属性，属性值应该用引号包裹。

2，绑定事件

combobox可以绑定事件监听，事件可以绑定在<input>或<select>标签的data-options参数中，比如用下面的代码绑定onSelect事件：

<select id="type" name="type" class="easyui-combobox" data-options="onSelect:changeType">

这个事件绑定表示选项更换之后会调用JavaScript中定义的changeType()函数

也可以在JavaScript代码中指定，比如用下面的代码绑定onSelect事件：

$('#type').combobox({onSelect: function (n,o) {}});

3，调用方法

combobox可以调用一些方法，可调用的方法参见EasyUI的文档。

比如调用setValue方法：

$("#type").combobox('setValue','somevalue')

其中'setValue'是方法名，'somvalue'是参数。

有的方法没有参数，比如getValue方法：

var number=$("#number").combobox('getValue');

二，combobox的普通操作

如果有如下的combobox定义：

<input type="text" id="number" name="number" >

$("#number").combobox({onChange: function (n,o) {changeNumber();}});

1，获取选中项的value

var number=$("#number").combobox('getValue');

获取的是下拉框选中项的value值，不是显示的文字。

2，获取选中项的文字

var number=$("#number").combobox('getText');

3，指定选中某项

$("#number").combobox('setValue','somevalue')

或

$("#number").combobox('select','somevalue')

combobox('setValue')和combobox('select')的相同点：

1，都会触发onchange事件。

2，如果下拉框的value中存在'somevalue'这个值时，combobox下拉框会自动选中这个选项，否则会在文本框中显示该值，不选中任何选项。

combobox('setValue')和combobox('select')的不同：

combobox('setValue')，不会触发onselect事件。即使目标value存在且被下拉框选中也不会触发。

combobox('select')，会触发onselect事件，即使目标value不存在也会触发，此时onselect事件中的参数n为null。

4，清空选中项

$("#number").combobox('clear');

该方法只能清空选中项，不会影响下拉框选项列表。

5，清空下拉选项列表

$("#number").combobox('loadData', {});

该方法会清空下拉框的所有选项。loadData方法本身是用来加载静态下拉框选项的。

6，重新加载下拉选项

$("#number").combobox('reload');

还可以添加url参数，按照新的url参数来加载下拉选项：

$("#number").combobox('reload',url);

7，得到下拉框的下拉选项类

var opts = $("#type").combobox("options");

和combobox("getData")不同，combobox("options")得到的并不是下拉选项的列表，而是一个对象结构。

比如有这样的combobox：

<input id="type" class="easyui-combobox" name="type" data-options="valueField:'id',textField:'text',url:'getType.do' ">

那么：

var valueField = $("#type").combobox("options").valueField;

得到的是字符串"id"。不含引号。

而

var url = $("#type").combobox("options").url;

得到的则是字符串'getType.do'。不含引号。

8，得到下拉框的全部数据

var allData = $("#type").combobox("getData");

该方法得到的是一个数组，可以用allData.length得到数组长度。也可以通过for循环来遍历。

数组的每个元素都代表一个下拉选项。

比如有这样的combobox：

<input id="type" class="easyui-combobox" name="type" data-options="valueField:'id',textField:'text',url:'getType.do' ">

那么：

$("#type").combobox("getData")[0]['id'];

代表获取第一个下拉选项的value值。

注意：必须使用['id']的形式，笼统的使用[valueField]是错误的。

所以可以结合combobox("options")来达到统一的效果：

var field = $("#type").combobox("options").valueField;var allData = $("#type").combobox("getData");var value=allData[0][field];

以上代码中的value就是第一个下拉选项的value值。

9，onChange事件

onchange是combobox中的值发生变化时触发的事件。

这个发生变化包括在文本框中输入文字，还有点击下拉框中的其他选项。

当在文本框输入文字时，如果两次键入文字的时间间隔较小，该事件不会触发，稍一停顿则会触发，这个时间目测大概零点几秒。

onchange可以这样定义：

$("#type").combobox({onChange: function (n,o) {}});

n代表新选择的下拉选项的value，或者在文本框中刚刚输入的文字。这取决于之前的值是选择下拉框选项而来还是在文本框中键入了文字。

o代表修改前的下拉选项的value，或者修改前在文本框中输入的文字。这取决于之前的值是选择下拉框选项而来还是在文本框中键入了文字。

10，onSelect事件

onselect是在combobox下拉框中更换下拉选项时触发的事件。

和onchange事件不同，在文本框中手动输入内容时不会触发onselect。

onselect可以这样定义：

$("#type").combobox({onSelect: function (n,o) {}});

n代表新选择的下拉选项。

o代表选择前的下拉选项。

注意，和onChange不同，onSelect的n和o代表的是选择之前和选择之后的下拉选项，可以通过：

n.valuen.text

来获得选中项的value和文本内容

三，combobox的创建方式

EasyUI的combobox有以下几种创建方式：

1，<select>元素+预定义<option>

只需要在<select>元素中添加class="easyui-combobox"即可。

比如：

<select id="type" class="easyui-combobox" name="type" style="width: 100px"><option value=""></option><option value="1">类型1</option><option value="2">类型2</option><option value="3">类型3</option></select>

2，<select>元素+动态加载下拉选项

在<select>标签中添加class="easyui-combobox"参数，另外在<select>标签中添加data-options参数，并在参数值中设定url属性。

比如：

<select id="type" class="easyui-combobox" name="type"data-options="url:'getType.do',valueField:'id',textField:'text' "><option value="">请选择</option></select>

注意，动态下拉选项加载完成后，之前预加载的所有下拉选项会消失。

3，<input>元素+预定义JSON

在<input>标签中添加class="easyui-combobox"参数，另外在<input>标签中添加data-options参数，并在参数值中设置data属性，data的值是JSON格式。

比如：

<input class="easyui-combobox" id="type" name="type"data-options="valueField: 'id',textField: 'text',data: [{id: '1',text: '类型1'},{id: '2',text: 'Perl'},{id: '3',text: 'Ruby'}]"/>

4，<input>元素+动态加载下拉选项

在<input>标签中添加class="easyui-combobox"参数，另外在<input>标签中添加data-options参数，并在参数值中设定url属性。

比如：

<input id="type" class="easyui-combobox" name="type" data-options="valueField:'id',textField:'text',url:'getType.do '">

valueField:'id'，表示url返回值中的id参数将被设置为下拉选项的value。

textField:'text'，表示url返回值中的text参数将被设置为下拉选项的文本内容。

url，url是请求地址，可以返回JSON列表格式，也可以返回其他key-value形式的列表。

如果是java+spring的组合，可以返回List<Map<String, Object>>格式，List中的每个Map代表一个下拉选项，Map.get("id")的值就是下拉选项的value的值，Map.get("text")的值就是下拉选项的文本。

建议使用org.springframework.web.bind.annotation.ResponseBody注解。

5，由jquery代码创建。

首先需要一个<input>元素或<select>元素：

<input id="type" name="type" value="type">

然后用如下代码创建combobox：

$('#type').combobox({url:'getType.do',valueField:'id',textField:'text'});

实际上只要执行：

$('#type').combobox({});

就可以把<input>元素或<select>元素变为combobox下拉框。这个过程貌似是不可逆的，除非把元素删除然后重新添加一个。

除了以上代码中定义的参数之外，还可以绑定EasyUI的其他参数或事件。

四，其他几个属性，事件，方法简介

1，groupField属性

指定要被分组的字段。

2，groupFormatter属性

返回要显示在分组项目上的分组文本。

用函数的方式定义，类似绑定事件时的写法。

3，onBeforeLoad事件

在发起加载请求前触发的事件，如果方法返回了false，则不会加载。

4，onLoadSuccess事件

远程数据加载成功后触发的事件。

5，onLoadError事件

远程数据加载失败后触发的事件。

6，setValues方法

给combobox批量赋值并选中。

$('#type').combobox('setValues', ['1','2']);

7，unselect方法

取消选择指定value。

以上