jQuery EasyUI 插件扩展自 $.fn.combo.defaults。通过 $.fn.combobox.defaults 重写默认的 defaults。
组合框（combobox）显示一个可编辑的文本框和下拉列表，用户可以从下拉列表中选择一个或多个值。用户可以直接输入文本到列表的顶部，或者从列表中选择一个或多个现成的值。
依赖
- combo
用法
从带有预定义结构的 <select> 元素创建组合框（combobox）。
<select id="cc" class="easyui-combobox" name="dept" style="width:200px;"> <option value="aa">aitem1</option> <option>bitem2</option> <option>bitem3</option> <option>ditem4</option> <option>eitem5</option></select>
从 <input> 标记创建组合框（combobox）。
<input id="cc" class="easyui-combobox" name="dept" data-options="valueField:'id',textField:'text',url:'get_data.php'">
使用 javascript 创建组合框（combobox）。
<input id="cc" name="dept" value="aa">
$('#cc').combobox({ url:'combobox_data.json', valueField:'id', textField:'text'});创建两个依赖的组合框（combobox）。
<input id="cc1" class="easyui-combobox" data-options=" valueField: 'id', textField: 'text', url: 'get_data1.php', onSelect: function(rec){ var url = 'get_data2.php?id='+rec.id; $('#cc2').combobox('reload', url); }"><input id="cc2" class="easyui-combobox" data-options="valueField:'id',textField:'text'">json 数据格式的示例：
[{ "id":1, "text":"text1"},{ "id":2, "text":"text2"},{ "id":3, "text":"text3", "selected":true},{ "id":4, "text":"text4"},{ "id":5, "text":"text5"}]属性
该属性扩展自组合（combo），下面是为组合框（combobox）添加的属性。
| 名称 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| valueField | string | 绑定到该组合框（ComboBox）的 value 上的基础数据的名称。 | value |
| textField | string | 绑定到该组合框（ComboBox）的 text 上的基础数据的名称。 | text |
| groupField | string | 指示要被分组的字段。该属性自版本 1.3.4 起可用。 | null |
| groupFormatter | function(group) | 返回要显示在分组项目上的分组文本。该属性自版本 1.3.4 起可用。 代码实例： $('#cc').combobox({ groupFormatter: function(group){ return '<span style="color:red">' + group + '</span>'; }}); | |
| mode | string | 定义在文本改变时如何加载列表数据。如果组合框（combobox）从服务器加载就设置为 'remote'。当设置为 'remote' 模式时，用户输入的值将会被作为名为 'q' 的 http 请求参数发送到服务器，以获取新的数据。 | local |
| url | string | 从远程加载列表数据的 URL 。 | null |
| method | string | 用来检索数据的 http 方法。 | post |
| data | array | 被加载的列表数据。 代码实例： <input class="easyui-combobox" data-options=" valueField: 'label', textField: 'value', data: [{ label: 'java', value: 'Java' },{ label: 'perl', value: 'Perl' },{ label: 'ruby', value: 'Ruby' }]" /> | null |
| filter | function | 定义当 'mode' 设置为 'local' 时如何过滤本地数据。该函数有两个参数： q：用户输入的文本。 row：列表中的行数据。 返回 true 则允许显示该行。 代码实例： $('#cc').combobox({ filter: function(q, row){ var opts = $(this).combobox('options'); return row[opts.textField].indexOf(q) == 0; }}); | |
| formatter | function | 定义如何呈现行。该函数有一个参数：row。 代码实例： $('#cc').combobox({ formatter: function(row){ var opts = $(this).combobox('options'); return row[opts.textField]; }}); | |
| loader | function(param,success,error) | 定义如何从远程服务器加载数据。返回 false 则取消该动作。该函数有下列参数： param：要传到远程服务器的参数对象。 success(data)：当获取数据成功时将被调用的回调函数。 error()：当获取数据失败时将被调用的回调函数。 | json loader |
| loadFilter | function(data) | 返回要显示的过滤数据。该属性自版本 1.3.3 起可用。 |
事件
该事件扩展自组合（combo），下面是为组合框（combobox）添加的事件。
| 名称 | 参数 | 描述 |
|---|---|---|
| onBeforeLoad | param | 在请求加载数据之前触发，返回 false 则取消加载动作。 代码实例： // change the http request parameters before load data from server$('#cc').combobox({ onBeforeLoad: function(param){ param.id = 2; param.language = 'js'; }}); |
| onLoadSuccess | none | 当远程数据加载成功时触发。 |
| onLoadError | none | 当远程数据加载失败时触发。 |
| onSelect | record | 当用户选择一个列表项时触发。 |
| onUnselect | record | 当用户取消选择一个列表项时触发。 |
方法
该方法扩展自组合（combo），下面是为组合框（combobox）添加或重写的方法。
| 名称 | 参数 | 描述 |
|---|---|---|
| options | none | 返回选项（options）对象。 |
| getData | none | 返回加载的数据。 |
| loadData | data | 加载本地列表数据。 |
| reload | url | 请求远程的列表数据。传 'url' 参数来重写原始的 URL 值。 代码实例： $('#cc').combobox('reload'); // reload list data using old URL$('#cc').combobox('reload','get_data.php'); // reload list data using new URL |
| setValues | values | 设置组合框（combobox）值的数组。 代码实例： $('#cc').combobox('setValues', ['001','002']); |
| setValue | value | 设置组合框（combobox）的值。 代码实例： $('#cc').combobox('setValue', '001'); |
| clear | none | 清除组合框（combobox）的值。 |
| select | value | 选择指定的选项。 |
| unselect | value | 取消选择指定的选项。 |
jQuery EasyUI 插件