jQuery EasyUI 表單插件 - Combobox 組合框

jQuery EasyUI 插件 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）添加的屬性。

名稱 類型 描述 默認值
valueField string 綁定到該組合框（ComboBox）的 value 上的基礎數據的名稱。 value
textField string 綁定到該組合框（ComboBox）的 text 上的基礎數據的名稱。 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 定義在文本改變時如何加載列表數據。如果組合框（combobox）從伺服器加載就設置為 'remote'。當設置為 'remote' 模式時，用戶輸入的值將會被作為名為 'q' 的 http 請求參數發送到伺服器，以獲取新的數據。 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
loadFilter function(data) 返回要顯示的過濾數據。該屬性自版本 1.3.3 起可用。

事件

該事件擴展自組合（combo），下麵是為組合框（combobox）添加的事件。

名稱 參數 描述
onBeforeLoad param 在請求加載數據之前觸發，返回 false 則取消加載動作。
代碼實例： 
// change the http request parameters before load data from server
$('#cc').combobox({
    onBeforeLoad: function(param){
        param.id = 2;
        param.language = 'js';
    }
});
onLoadSuccess none 當遠程數據加載成功時觸發。
onLoadError none 當遠程數據加載失敗時觸發。
onSelect record 當用戶選擇一個列表項時觸發。
onUnselect record 當用戶取消選擇一個列表項時觸發。

方法

該方法擴展自組合（combo），下麵是為組合框（combobox）添加或重寫的方法。

名稱 參數 描述
options none 返回選項（options）對象。
getData none 返回加載的數據。
loadData data 加載本地列表數據。
reload url 請求遠程的列表數據。傳 'url' 參數來重寫原始的 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）值的數組。
代碼實例： 
$('#cc').combobox('setValues', ['001','002']);
setValue value 設置組合框（combobox）的值。
代碼實例： 
$('#cc').combobox('setValue', '001');
clear none 清除組合框（combobox）的值。
select value 選擇指定的選項。
unselect value 取消選擇指定的選項。
jQuery EasyUI 插件 jQuery EasyUI 插件