jQuery EasyUI 表单插件 – Combobox 组合框

jQuery EasyUI 表单插件 - Combobox 组合框

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）添加的属性。

$('#cc').combobox({
	groupFormatter: function(group){
		return '<span style="color:red">' + group + '</span>';
	}
});

<input class="easyui-combobox" data-options=" 		valueField: 'label', 		textField: 'value', 		data: [{ 			label: 'java', 			value: 'Java' 		},{ 			label: 'perl', 			value: 'Perl' 		},{ 			label: 'ruby', 			value: 'Ruby' 		}]" />

$('#cc').combobox({
	filter: function(q, row){
		var opts = $(this).combobox('options');
		return row[opts.textField].indexOf(q) == 0;
	}
});

$('#cc').combobox({
	formatter: function(row){
		var opts = $(this).combobox('options');
		return row[opts.textField];
	}
});

事件

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

// change the http request parameters before load data from server
$('#cc').combobox({
	onBeforeLoad: function(param){
		param.id = 2;
		param.language = 'js';
	}
});

方法

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

$('#cc').combobox('reload');  // reload list data using old URL
$('#cc').combobox('reload','get_data.php');  // reload list data using new URL

$('#cc').combobox('setValues', ['001','002']);

$('#cc').combobox('setValue', '001');

jQuery EasyUI 插件