JQuery EasyUI combobox(下拉列表框)
下拉列表框
繼承 $.fn.combo.defaults. 重寫 $.fn.combobox.defaults.
組合框顯示一個可編輯的文本框和下拉列表,用戶選擇一個或多個值。用戶可以直接輸入文本到頂部的列表,或選擇一個或多個當前值列表。
width="300" height="150" src="http://www.wuzhuti.cn/resources/jquery-easyui-1.3.2/demo/combobox/basic.html" frameborder="no" scrolling="no" style="width: 100%; height: 350px;">依賴
- combo
應用實例
從<select>創建下拉列表框元素與一個預定義的結構。
[html] 預覽復制print?創建下拉列表框從<input>標記。
[html] 預覽復制print?使用javascript創建下拉列表框。
[html] 預覽復制print?創建兩個依賴的組合框。
[html] 預覽復制print?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 |
| mode | string | 定義了如何加載列表數據當文本改變。設置為“remote“如果下拉列表框從服務器加載。當設置為“remot“模式下,用戶類型將被發送的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 | 定義了如何過濾本地數據當“model”設置為“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。這個函數接受一個參數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 |
?
事件
事件從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 | 取消選擇指定的項。 |
總結
以上是生活随笔為你收集整理的JQuery EasyUI combobox(下拉列表框)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 使用jquery获取radio的值
- 下一篇： js对象、构造函数、命名空间、方法、属性