easyUI ComboBox
combobox显示的是一个可以编辑的文本框和一个下拉列表.允许用户从里面选择一个或者是多个值,用户可以直接输入值到列表顶部,或者可以从列表选择一个或多个现有值.
相关依赖
- combo
使用示例
<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 id="cc" class="easyui-combobox" name="dept"
data-options="valueField:'id',textField:'text',url:'get_data.php'" />
<input id="cc" name="dept" value="aa">
$('#cc').combobox({
url:'combobox_data.json',
valueField:'id',
textField:'text'
});
方法3：
<input id="cc" class="easyui-combobox" name="dept"
data-options="valueField:'id',textField:'text'" />
$("#cc").combobox("loadData",$.parseJSON(data)) ;
<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'" />
[{
"id":1,
"text":"text1"
},{
"id":2,
"text":"text2"
},{
"id":3,
"text":"text3",
"selected":true
},{
"id":4,
"text":"text4"
},{
"id":5,
"text":"text5"
}]
属性
这些属性继承至 combo,下面是combobox的一些新增属性.
| Name | Type | Description | Default |
|---|---|---|---|
| valueField | string | 绑定到这个combobox的基础数据值名. | value |
| textField | string | 绑定到这个combobox的数据字段名. | text |
| mode | string | 当文本改变时定义如何加载显示列表数据.如果设置为'remote' combobox从远程服务器加载数据.当设置为'remote'模式时, 用户输入的信息将发送作为http请求参数,参数名为'q'到服务器检索新的数据. | 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 |
事件
事件继承至 combo, 以下是combobox的新增事件.
| Name | Parameters | Description |
|---|---|---|
| onBeforeLoad | param | 一个请求在加载数据之前触发,返回false取消这个加载动作.
示例代码: // 在从远程服务器加载数据之前改变请求参数
$('#cc').combobox({
onBeforeLoad: function(param){
param.id = 2;
param.language = 'js';
}
});
|
| onLoadSuccess | none | 当远程数据加载成功之后触发. |
| onLoadError | none | 远程数据加载出错触发. |
| onSelect | record | 当用户选择一个列表项的时候触发. |
| onUnselect | record | 当用户取消选择一个列表项的时候触发. |
方法
方法继承至 combo,以下是combobox的新增的或者是重写的方法.
| Name | Parameter | Description |
|---|---|---|
| options | none | 返回 options 对象. |
| getData | none | 返回加载数据. |
| loadData | data | 返回本地列表数据. |
| reload | url | 请求远程服务器列表数据.传入'url'参数重写原始的URL值.
示例代码: $('#cc').combobox('reload'); //使用原始URL重新加载列表数据
$('#cc').combobox('reload','get_data.php'); //使用新的URL重新加载列表数据
|
| setValues | values | 设置 combobox 值数组.
示例代码: $('#cc').combobox('setValues', ['001','002']);
|
| setValue | value | 设置 combobox 值.
示例代码: $('#cc').combobox('setValues', '001');
|
| clear | none | 清除 combobox 值. |
| select | value | 选择特定的项. |
| unselect | value | 取消特定的选择项 |
