可裝載組合框 - ComboBox
繼承自$.fn.combo.defaults,通過$.fn.combobox.defaults覆蓋默認值
combobox顯示的是一個可以編輯的文本框和一個下拉列表.允許用戶從里面選擇一個或者是多個值,用戶可以直接輸入值到列表頂部,或者可以從列表選擇一個或多個現有值.
Dependencies
- combo
使用方法（Usage Example）
從<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"
- }]
Properties
這些屬性繼承至 combo,下面是combobox的一些新增屬性.
| Name | Type | Description | Default |
|---|---|---|---|
| valueField | string | 綁定到這個combobox的基礎數據值名. | value |
| textField | string | 綁定到這個combobox的數據字段名. | text |
| mode | string | 當文本改變時定義如何加載顯示列表數據.如果設置為'remote' combobox從遠程服務器加載數據.當設置為'remote'模式時, 用戶輸入的信息將發送作為http請求參數,參數名為'q'到服務器檢索新的數據. | local |
| url | string | 一個從遠程服務器加載列表數據的URL. | null |
| method | string | 檢索數據的http請求方法. | post |
| data | array | 需要加載到列表的數據. 示例代碼: <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'的時候. 這個函數提供兩個參數: q: 用戶輸入的文本. row: 列表的行數據. 返回true 允許行顯示 . 示例代碼: $('#cc').combobox({
filter: function(q, row){
var opts = $(this).combobox('options');
return row[opts.textField].indexOf(q) == 0;
}
});
|
|
| formatter | function | 定義如何呈現行. 這個函數提供一個參數 :row. 示例代碼: $('#cc').combobox({
formatter: function(row){
var opts = $(this).combobox('options');
return row[opts.textField];
}
});
|
|
| loader | function(param,success,error) | 定義如何從遠程服務器加載數據. 返回false終止這個動作.這個函數提供一下參數: param:傳遞給遠程服務器的參數對象. success(data): 當檢索數據成功這個回調函數將被調用. error():當檢索數據失敗(異常,而不是返回空數據的時候)這個函數將被調用. |
json loader |
Events
事件繼承至 combo, 以下是combobox的新增事件.
| Name | Parameters | Description |
|---|---|---|
| onBeforeLoad | param | 一個請求在加載數據之前觸發,返回false取消這個加載動作. 示例代碼: // 在從遠程服務器加載數據之前改變請求參數
$('#cc').combobox({
onBeforeLoad: function(param){
param.id = 2;
param.language = 'js';
}
});
|
| onLoadSuccess | none | 當遠程數據加載成功之后觸發. |
| onLoadError | none | 遠程數據加載出錯觸發. |
| onSelect | record | 當用戶選擇一個列表項的時候觸發. |
| onUnselect | record | 當用戶取消選擇一個列表項的時候觸發. |
Methods
方法繼承至 combo,以下是combobox的新增的或者是重寫的方法.
| Name | Parameter | Description |
|---|---|---|
| options | none | 返回 options 對象. |
| getData | none | 返回加載數據. |
| loadData | data | 返回本地列表數據. |
| reload | url | 請求遠程服務器列表數據.傳入'url'參數重寫原始的URL值. 示例代碼: $('#cc').combobox('reload'); //使用原始URL重新加載列表數據
$('#cc').combobox('reload','get_data.php'); //使用新的URL重新加載列表數據
|
| setValues | values | 設置 combobox 值數組. 示例代碼: $('#cc').combobox('setValues', ['001','002']);
|
| setValue | value | 設置 combobox 值. 示例代碼: $('#cc').combobox('setValues', '001');
|
| clear | none | 清除 combobox 值. |
| select | value | 選擇特定的項. |
| unselect | value | 取消特定的選擇項. |
| $('#Id').combogrid('grid').datagrid('selectRecord',value值); 用來設置默認選中 $('#goodsSelect').combogrid('grid').datagrid("clearSelections");清除選擇 |
||