场景
效果
用法
从带有预定义结构的 <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 起可用。 代码实例:
| |
mode | string | 定义在文本改变时如何加载列表数据。如果组合框(combobox)从服务器加载就设置为 'remote'。当设置为 'remote' 模式时,用户输入的值将会被作为名为 'q' 的 http 请求参数发送到服务器,以获取新的数据。 | local |
url | string | 从远程加载列表数据的 URL 。 | null |
method | string | 用来检索数据的 http 方法。 | post |
data | array | 被加载的列表数据。 代码实例:
| null |
filter | function | 定义当 'mode' 设置为 'local' 时如何过滤本地数据。该函数有两个参数: q:用户输入的文本。 row:列表中的行数据。 返回 true 则允许显示该行。 代码实例:
| |
formatter | function | 定义如何呈现行。该函数有一个参数:row。 代码实例:
| |
loader | function(param,success,error) | 定义如何从远程服务器加载数据。返回 false 则取消该动作。该函数有下列参数: param:要传到远程服务器的参数对象。 success(data):当获取数据成功时将被调用的回调函数。 error():当获取数据失败时将被调用的回调函数。 | json loader |
loadFilter | function(data) | 返回要显示的过滤数据。该属性自版本 1.3.3 起可用。 | |
事件
该事件扩展自组合(combo),下面是为组合框(combobox)添加的事件。
名称 | 参数 | 描述 |
onBeforeLoad | param | 在请求加载数据之前触发,返回 false 则取消加载动作。 代码实例:
|
onLoadSuccess | none | 当远程数据加载成功时触发。 |
onLoadError | none | 当远程数据加载失败时触发。 |
onSelect | record | 当用户选择一个列表项时触发。 |
onUnselect | record | 当用户取消选择一个列表项时触发。 |
方法
该方法扩展自组合(combo),下面是为组合框(combobox)添加或重写的方法。
名称 | 参数 | 描述 |
options | none | 返回选项(options)对象。 |
getData | none | 返回加载的数据。 |
loadData | data | 加载本地列表数据。 |
reload | url | 请求远程的列表数据。传 'url' 参数来重写原始的 URL 值。 代码实例:
|
setValues | values | 设置组合框(combobox)值的数组。 代码实例:
|
setValue | value | 设置组合框(combobox)的值。 代码实例:
|
clear | none | 清除组合框(combobox)的值。 |
select | value | 选择指定的选项。 |
unselect | value | 取消选择指定的选项。 |
实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
<script type="text/javascript" src="/easyui/jquery.min.js"></script>
<script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<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>
</body>
</html>