EasyUI ComboBox(下拉列表框)
阿新 • • 發佈:2019-02-06
ComboBox(下拉列表框)
擴充套件自$.fn.combo.defaults。使用$.fn.combobox.defaults重寫預設值物件。
下拉列表框顯示一個可編輯文字框和下拉式列表,使用者可以選擇一個值或多個值。使用者可以直接輸入文字到列表頂部或選擇一個或多個當前列表中的值。
依賴關係
- combo
使用案例
通過<select>元素建立一個預定義結構的下拉列表框。
- <select id="cc" class="easyui-combobox" name="dept" style="width:200px;">
- <option value="aa"
- <option>bitem2</option>
- <option>bitem3</option>
- <option>ditem4</option>
- <option>eitem5</option>
- </select>
通過<input>標籤建立下拉列表框。
- <input id="cc" class="easyui-combobox" name="dept"
- data-options
使用Javascript建立下拉列表框。
- <input id="cc" name="dept" value="aa">
- $('#cc').combobox({
- url:'combobox_data.json',
- valueField:'id',
- textField:'text'
- });
建立2個有依賴關係的下拉列表框。
- <input id="cc1" class="easyui-combobox"
- 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(自定義下拉框),下拉列表框新增的屬性如下:
屬性名 | 屬性值型別 | 描述 | 預設值 |
---|---|---|---|
valueField | string | 基礎資料值名稱繫結到該下拉列表框。 | value |
textField | string | 基礎資料欄位名稱繫結到該下拉列表框。 | 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 | 定義了當文字改變時如何讀取列表資料。設定為'remote'時,下拉列表框將會從伺服器載入資料。當設定為“remote”模式時,使用者輸入將被髮送到名為'q'的HTTP請求引數到伺服器檢索新資料。 | local |
url | string | 通過URL載入遠端列表資料。 | null |
method | string | HTTP方法檢索資料(POST / GET)。 | 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'時如何過濾本地資料,函式有2個引數: q:使用者輸入的文字。 row:列表行資料。 返回true的時候允許行顯示。 程式碼示例: $('#cc').combobox({ filter: function(q, row){ var opts = $(this).combobox('options'); return row[opts.textField].indexOf(q) == 0; } }); |
|
formatter | function |
定義如何渲染行。該函式接受1個引數: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(自定義下拉框),下拉列表框新增的事件如下:
事件名 | 事件引數 | 描述 |
---|---|---|
onBeforeLoad | param |
在請求載入資料之前觸發,返回false取消該載入動作。
程式碼示例: // 在載入伺服器資料之前改變http請求引數的值 $('#cc').combobox({ onBeforeLoad: function(param){ param.id = 2; param.language = 'js'; } }); |
onLoadSuccess | none | 在載入遠端資料成功的時候觸發。 |
onLoadError | none | 在載入遠端資料失敗的時候觸發。 |
onSelect | record | 在使用者選擇列表項的時候觸發。 |
onUnselect | record | 在使用者取消選擇列表項的時候觸發。 |
方法
下拉列表框擴充套件自combo(自定義下拉框),下拉列表框新增或重寫的方法如下:
方法名 | 方法引數 | 描述 |
---|---|---|
options | none | 返回屬性物件。 |
getData | none | 返回載入資料。 |
loadData | data | 讀取本地列表資料。 |
reload | url |
請求遠端列表資料。通過'url'引數重寫原始URL值。
程式碼示例: $('#cc').combobox('reload'); // 使用舊的URL重新載入列表資料 $('#cc').combobox('reload','get_data.php'); // 使用新的URL重新載入列表資料 |
setValues | values |
設定下拉列表框值陣列。
程式碼示例: $('#cc').combobox('setValues', ['001','002']); |
setValue | value |
設定下拉列表框的值。
程式碼示例: $('#cc').combobox('setValue', '001'); |
clear | none | 清除下拉列表框的值。 |
select | value | 選擇指定項。 |
unselect | value | 取消選擇指定項。 |