jQuery EasyUI 教程
jQuery EasyUI 表單插件 - Combobox 組合框
jQuery EasyUI 插件擴展自 $.fn.combo.defaults。通過 $.fn.combobox.defaults 重寫默認的 defaults。
組合框（combobox）顯示一個可編輯的文本框和下拉列表，用戶可以從下拉列表中選擇一個或多個值。用戶可以直接輸入文本到列表的頂部，或者從列表中選擇一個或多個現(xiàn)成的值。
依賴
- combo
用法
從帶有預定義結構的 <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> 標記創(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)建兩個依賴的組合框（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"
}]
屬性
該屬性擴展自組合（combo），下面是為組合框（combobox）添加的屬性。
| 名稱 | 類型 | 描述 | 默認值 |
|---|---|---|---|
| valueField | string | 綁定到該組合框（ComboBox）的 value 上的基礎數(shù)據(jù)的名稱。 | value |
| textField | string | 綁定到該組合框（ComboBox）的 text 上的基礎數(shù)據(jù)的名稱。 | text |
| groupField | string | 指示要被分組的字段。該屬性自版本 1.3.4 起可用。 | null |
| groupFormatter | function(group) | 返回要顯示在分組項目上的分組文本。該屬性自版本 1.3.4 起可用。 代碼實例：
$('#cc').combobox({
????groupFormatter: function(group){
????????return '<span style="color:red">' + group + '</span>';
????}
});
|
|
| mode | string | 定義在文本改變時如何加載列表數(shù)據(jù)。如果組合框（combobox）從服務器加載就設置為 'remote'。當設置為 'remote' 模式時，用戶輸入的值將會被作為名為 'q' 的 http 請求參數(shù)發(fā)送到服務器，以獲取新的數(shù)據(jù)。 | local |
| url | string | 從遠程加載列表數(shù)據(jù)的 URL 。 | null |
| method | string | 用來檢索數(shù)據(jù)的 http 方法。 | post |
| data | array | 被加載的列表數(shù)據(jù)。 代碼實例：
<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' 時如何過濾本地數(shù)據(jù)。該函數(shù)有兩個參數(shù)： q：用戶輸入的文本。 row：列表中的行數(shù)據(jù)。 返回 true 則允許顯示該行。 代碼實例：
$('#cc').combobox({
????filter: function(q, row){
????????var opts = $(this).combobox('options');
????????return row[opts.textField].indexOf(q) == 0;
????}
});
|
|
| formatter | function | 定義如何呈現(xiàn)行。該函數(shù)有一個參數(shù)：row。 代碼實例：
$('#cc').combobox({
????formatter: function(row){
????????var opts = $(this).combobox('options');
????????return row[opts.textField];
????}
});
|
|
| loader | function(param,success,error) | 定義如何從遠程服務器加載數(shù)據(jù)。返回 false 則取消該動作。該函數(shù)有下列參數(shù)： param：要傳到遠程服務器的參數(shù)對象。 success(data)：當獲取數(shù)據(jù)成功時將被調用的回調函數(shù)。 error()：當獲取數(shù)據(jù)失敗時將被調用的回調函數(shù)。 |
json loader |
| loadFilter | function(data) | 返回要顯示的過濾數(shù)據(jù)。該屬性自版本 1.3.3 起可用。 |
事件
該事件擴展自組合（combo），下面是為組合框（combobox）添加的事件。
| 名稱 | 參數(shù) | 描述 |
|---|---|---|
| onBeforeLoad | param | 在請求加載數(shù)據(jù)之前觸發(fā)，返回 false 則取消加載動作。 代碼實例：
// change the http request parameters before load data from server
$('#cc').combobox({
????onBeforeLoad: function(param){
????????param.id = 2;
????????param.language = 'js';
????}
});
|
| onLoadSuccess | none | 當遠程數(shù)據(jù)加載成功時觸發(fā)。 |
| onLoadError | none | 當遠程數(shù)據(jù)加載失敗時觸發(fā)。 |
| onSelect | record | 當用戶選擇一個列表項時觸發(fā)。 |
| onUnselect | record | 當用戶取消選擇一個列表項時觸發(fā)。 |
方法
該方法擴展自組合（combo），下面是為組合框（combobox）添加或重寫的方法。
| 名稱 | 參數(shù) | 描述 |
|---|---|---|
| options | none | 返回選項（options）對象。 |
| getData | none | 返回加載的數(shù)據(jù)。 |
| loadData | data | 加載本地列表數(shù)據(jù)。 |
| reload | url | 請求遠程的列表數(shù)據(jù)。傳 'url' 參數(shù)來重寫原始的 URL 值。 代碼實例：
$('#cc').combobox('reload'); // reload list data using old URL
$('#cc').combobox('reload','get_data.php'); // reload list data using new URL
|
| setValues | values | 設置組合框（combobox）值的數(shù)組。 代碼實例：
$('#cc').combobox('setValues', ['001','002']);
|
| setValue | value | 設置組合框（combobox）的值。 代碼實例：
$('#cc').combobox('setValue', '001');
|
| clear | none | 清除組合框（combobox）的值。 |
| select | value | 選擇指定的選項。 |
| unselect | value | 取消選擇指定的選項。 |
jQuery EasyUI 插件其他擴展