jQuery EasyUI 表單插件 – Combobox 組合框

jQuery EasyUI 表單插件 - Combobox 組合框

jQuery EasyUI 插件

依賴

• combo

用法

從帶有預(yù)定義結(jié)構(gòu)的 <select> 元素創(chuàng)建組合框（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> 標(biāo)記創(chuàng)建組合框（combobox）。

<input id="cc" class="easyui-combobox" name="dept"     data-options="valueField:'id',textField:'text',url:'get_data.php'">

使用 javascript 創(chuàng)建組合框（combobox）。

<input id="cc" name="dept" value="aa">

$('#cc').combobox({
    url:'combobox_data.json',
    valueField:'id',
    textField:'text'
});

創(chuàng)建兩個(gè)依賴的組合框（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 數(shù)據(jù)格式的示例：

[{
    "id":1,
    "text":"text1"
},{
    "id":2,
    "text":"text2"
},{
    "id":3,
    "text":"text3",
    "selected":true
},{
    "id":4,
    "text":"text4"
},{
    "id":5,
    "text":"text5"
}]

屬性

該屬性擴(kuò)展自組合（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];
	}
});

事件

該事件擴(kuò)展自組合（combo），下面是為組合框（combobox）添加的事件。

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

方法

該方法擴(kuò)展自組合（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 插件