首页 » jQuery EasyUI »
网站地图

jQuery EasyUI 表单插件 - Combobox 组合框

扩展自 $.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）添加的属性。

名称类型描述默认值
valueFieldstring绑定到该组合框（ComboBox）的 value 上的基础数据的名称。value
textFieldstring绑定到该组合框（ComboBox）的 text 上的基础数据的名称。text
groupFieldstring指示要被分组的字段。该属性自版本 1.3.4 起可用。null
groupFormatterfunction(group)返回要显示在分组项目上的分组文本。该属性自版本 1.3.4 起可用。 代码实例： 
$('#cc').combobox({
	groupFormatter: function(group){
		return '<span style="color:red">' + group + '</span>';
	}
});

modestring定义在文本改变时如何加载列表数据。如果组合框（combobox）从服务器加载就设置为 'remote'。当设置为 'remote' 模式时，用户输入的值将会被作为名为 'q' 的 http 请求参数发送到服务器，以获取新的数据。local
urlstring从远程加载列表数据的 URL 。null
methodstring用来检索数据的 http 方法。post
dataarray被加载的列表数据。 代码实例： 
<input class="easyui-combobox" data-options="
		valueField: 'label',
		textField: 'value',
		data: [{
			label: 'java',
			value: 'Java'
		},{
			label: 'perl',
			value: 'Perl'
		},{
			label: 'ruby',
			value: 'Ruby'
		}]" />
null
filterfunction定义当 'mode' 设置为 'local' 时如何过滤本地数据。该函数有两个参数：
q：用户输入的文本。
row：列表中的行数据。
返回 true 则允许显示该行。
代码实例： 
$('#cc').combobox({
	filter: function(q, row){
		var opts = $(this).combobox('options');
		return row[opts.textField].indexOf(q) == 0;
	}
});

formatterfunction定义如何呈现行。该函数有一个参数：row。 代码实例： 
$('#cc').combobox({
	formatter: function(row){
		var opts = $(this).combobox('options');
		return row[opts.textField];
	}
});

loaderfunction(param,success,error)定义如何从远程服务器加载数据。返回 false 则取消该动作。该函数有下列参数：
param：要传到远程服务器的参数对象。
success(data)：当获取数据成功时将被调用的回调函数。
error()：当获取数据失败时将被调用的回调函数。
json loader
loadFilterfunction(data)返回要显示的过滤数据。该属性自版本 1.3.3 起可用。

事件

该事件扩展自组合（combo），下面是为组合框（combobox）添加的事件。

名称参数描述
onBeforeLoadparam在请求加载数据之前触发，返回 false 则取消加载动作。 代码实例： 
// change the http request parameters before load data from server
$('#cc').combobox({
	onBeforeLoad: function(param){
		param.id = 2;
		param.language = 'js';
	}
});
onLoadSuccessnone当远程数据加载成功时触发。
onLoadErrornone当远程数据加载失败时触发。
onSelectrecord当用户选择一个列表项时触发。
onUnselectrecord当用户取消选择一个列表项时触发。

方法

该方法扩展自组合（combo），下面是为组合框（combobox）添加或重写的方法。

名称参数描述
optionsnone返回选项（options）对象。
getDatanone返回加载的数据。
loadDatadata加载本地列表数据。
reloadurl请求远程的列表数据。传 'url' 参数来重写原始的 URL 值。 代码实例： 
$('#cc').combobox('reload');  // reload list data using old URL
$('#cc').combobox('reload','get_data.php');  // reload list data using new URL
setValuesvalues设置组合框（combobox）值的数组。 代码实例： 
$('#cc').combobox('setValues', ['001','002']);
setValuevalue设置组合框（combobox）的值。 代码实例： 
$('#cc').combobox('setValue', '001');
clearnone清除组合框（combobox）的值。
selectvalue选择指定的选项。
unselectvalue取消选择指定的选项。