jQuery EasyUI，ComboBox(下拉列表框)組件，可以遠程加載數據的下拉列表組件
學習要點：
1.加載方式
2.屬性列表
3.事件列表
4.方法列表
本節課重點了解 EasyUI 中 ComboBox(下拉列表框)組件的使用方法，這個組件依賴於 Combo(自定義下拉框)組件。
一．加載方式
class 加載方式
<select id="box" class="easyui-combobox" name="box" style="width:200px;"> <option value="aaaa">aaaa</option> <option value="bbbb">bbbb</option> <option value="cccc">cccc</option> <option value="dddd">dddd</option> <option value="eeee">eeee</option> </select>
JS 加載方式
<input id="box" name="user">
js代碼
combobox()將一個input元素執行，(下拉列表框)組件
$(function () { $('#box').combobox({ valueField: 'id', textField: 'user', url: 'content.json', }); });
二．屬性列表
遠程content.json
[ { "user" : "蠟筆小新", "email" : "xiaoxin@163.com", "date" : "2014-10-1", "id":"1", "xb":"男" }, { "user" : "櫻桃小丸子", "email" : "xiaowanzi@163.com", "date" : "2014-10-2", "id":"2", "xb":"女" }, { "user" : "黑崎一護", "email" : "yihu@163.com", "date" : "2014-10-3", "id":"3", "xb":"男" }, { "user" : "黑崎2護", "email" : "yihu@163.com", "date" : "2014-10-3", "id":"4", "xb":"女" }, { "user" : "黑崎3護", "email" : "yihu@163.com", "date" : "2014-10-3", "id":"5", "xb":"男" }, { "user" : "黑崎4護", "email" : "yihu@163.com", "date" : "2014-10-3", "id":"6", "xb":"女" }, { "user" : "黑崎5護", "email" : "yihu@163.com", "date" : "2014-10-3", "id":"7" ,"xb":"男" } ]
valueField string 基礎數據值名稱綁定到該下拉列表框。默認為 value。設置下拉框的value值，如果是遠程數據設置數據庫指定的字段為value值
$(function () { $('#box').combobox({ valueField: 'id', //設置下拉框的value值，如果是遠程數據設置數據庫指定的字段為value值 textField: 'user', //設置下拉框的text值，如果是遠程數據設置數據庫指定的字段為text值 url: 'content.json', //URL 加載遠程列表數據 }); });
textField string 基礎數據字段名稱綁定到該下拉列表框。默認值 text。設置下拉框的text值，如果是遠程數據設置數據庫指定的字段為text值
$(function () { $('#box').combobox({ valueField: 'id', //設置下拉框的value值，如果是遠程數據設置數據庫指定的字段為value值 textField: 'user', //設置下拉框的text值，如果是遠程數據設置數據庫指定的字段為text值 url: 'content.json', //URL 加載遠程列表數據 }); });
groupField string 指定分組的字段名稱。默認值 null。通過數據庫一個字段來分組如通過性別字段分組
$(function () { $('#box').combobox({ valueField: 'id', //設置下拉框的value值，如果是遠程數據設置數據庫指定的字段為value值 textField: 'user', //設置下拉框的text值，如果是遠程數據設置數據庫指定的字段為text值 url: 'content.json', //URL 加載遠程列表數據 groupField:'xb' //通過數據庫一個字段來分組如通過性別字段分組 }); });
groupFormatter function(group)返回格式化后的分組標題文本，以顯示分組項
$(function () { $('#box').combobox({ valueField: 'id', //設置下拉框的value值，如果是遠程數據設置數據庫指定的字段為value值 textField: 'user', //設置下拉框的text值，如果是遠程數據設置數據庫指定的字段為text值 url: 'content.json', //URL 加載遠程列表數據 groupField:'xb', //通過數據庫一個字段來分組如通過性別字段分組 groupFormatter:function (group) { //返回格式化后的分組標題文本，以顯示分組項 return '('+group+')'; } }); });
mode string定義了當文本改變時如何讀取列表數據。設置為'remote'時，下拉列表框將會從服務器加載數據。當設置為“remote”模式時，用戶輸入將被發送到名為'q'的 HTTP 請求參數到服務器檢索新數據。
$(function () { $('#box').combobox({ valueField: 'id', //設置下拉框的value值，如果是遠程數據設置數據庫指定的字段為value值 textField: 'user', //設置下拉框的text值，如果是遠程數據設置數據庫指定的字段為text值 url: 'content.json', //URL 加載遠程列表數據 groupField:'xb', //通過數據庫一個字段來分組如通過性別字段分組 groupFormatter:function (group) { //返回格式化后的分組標題文本，以顯示分組項 return '('+group+')'; }, mode:'remote' //向服務器傳遞輸入值來索引 }); });
url string 通過 URL 加載遠程列表數據。
$(function () { $('#box').combobox({ valueField: 'id', //設置下拉框的value值，如果是遠程數據設置數據庫指定的字段為value值 textField: 'user', //設置下拉框的text值，如果是遠程數據設置數據庫指定的字段為text值 url: 'content.json', //URL 加載遠程列表數據 }); });
method string HTTP 方法檢索數據(POST / GET)。設置遠程提交方式
data array 數據列表加載。本地化獲取數據
$(function () { $('#box').combobox({ valueField: 'id', //設置下拉框的value值，如果是遠程數據設置數據庫指定的字段為value值 textField: 'user', //設置下拉框的text值，如果是遠程數據設置數據庫指定的字段為text值 // url: 'content.json', //URL 加載遠程列表數據 groupField:'xb', //通過數據庫一個字段來分組如通過性別字段分組 groupFormatter:function (group) { //返回格式化后的分組標題文本，以顯示分組項 return '('+group+')'; }, mode: 'remote', //向服務器傳遞輸入值來索引 data: [ { "user": "蠟筆小新", "email": "xiaoxin@163.com", "date": "2014-10-1", "id": "1", "xb": "男" }, { "user": "櫻桃小丸子", "email": "xiaowanzi@163.com", "date": "2014-10-2", "id": "2", "xb": "女" } ] }); });
filter function定義當'mode'設置為'local'時如何過濾本地數據，函數有 2 個參數：q：用戶輸入的文本。row：列表行數據。返回 true 的時候允許行顯示。過濾查找，mode不設置的情況下使用
$(function () { $('#box').combobox({ valueField: 'id', //設置下拉框的value值，如果是遠程數據設置數據庫指定的字段為value值 textField: 'user', //設置下拉框的text值，如果是遠程數據設置數據庫指定的字段為text值 url: 'content.json', //URL 加載遠程列表數據 groupField: 'xb', //通過數據庫一個字段來分組如通過性別字段分組 groupFormatter: function (group) { //返回格式化后的分組標題文本，以顯示分組項 return '(' + group + ')'; }, filter: function (q, row) { var opts = $(this).combobox('options'); return row[opts.textField].indexOf(q) >= 0; }, }); });
formatter function 定義如何渲染行。該函數接受 1 個參數：row。格式化下拉選項
$(function () { $('#box').combobox({ valueField: 'id', //設置下拉框的value值，如果是遠程數據設置數據庫指定的字段為value值 textField: 'user', //設置下拉框的text值，如果是遠程數據設置數據庫指定的字段為text值 url: 'content.json', //URL 加載遠程列表數據 groupField: 'xb', //通過數據庫一個字段來分組如通過性別字段分組 groupFormatter: function (group) { //返回格式化后的分組標題文本，以顯示分組項 return '(' + group + ')'; }, formatter: function (row) { //格式化下拉選項 var opts = $(this).combobox('options'); return '[' + row[opts.textField] + ']'; } }); });
loader function(param,success,error)定義了如何從遠程服務器加載數據。返回false 可以忽略該動作。該函數具備如下參數：param：傳遞到遠程服務器的參數對象。success(data)：在檢索數據成功的時候調用該回調函數。error()：在檢索數據失敗的時候調用該回調函數。
loadFilter function(data) 返回過濾后的數據並顯示。
三．事件列表
onBeforeLoad param在請求加載數據之前觸發，返回 false 取消該加載動作。
$(function () { $('#box').combobox({ valueField: 'id', //設置下拉框的value值，如果是遠程數據設置數據庫指定的字段為value值 textField: 'user', //設置下拉框的text值，如果是遠程數據設置數據庫指定的字段為text值 url: 'content.json', //URL 加載遠程列表數據 // groupField: 'xb', //通過數據庫一個字段來分組如通過性別字段分組 onBeforeLoad:function () { //在請求加載數據之前觸發，返回 false 取消該加載動作。 alert('在請求加載數據之前觸發'); } }); });
onLoadSuccess none 在加載遠程數據成功的時候觸發。
$(function () { $('#box').combobox({ valueField: 'id', //設置下拉框的value值，如果是遠程數據設置數據庫指定的字段為value值 textField: 'user', //設置下拉框的text值，如果是遠程數據設置數據庫指定的字段為text值 url: 'content.json', //URL 加載遠程列表數據 // groupField: 'xb', //通過數據庫一個字段來分組如通過性別字段分組 onLoadSuccess:function () { //在加載遠程數據成功的時候觸發 alert('在加載遠程數據成功的時候觸發'); } }); });
onLoadError none 在加載遠程數據失敗的時候觸發。
$(function () { $('#box').combobox({ valueField: 'id', //設置下拉框的value值，如果是遠程數據設置數據庫指定的字段為value值 textField: 'user', //設置下拉框的text值，如果是遠程數據設置數據庫指定的字段為text值 url: 'content2.json', //URL 加載遠程列表數據 // groupField: 'xb', //通過數據庫一個字段來分組如通過性別字段分組 onLoadError:function () { //在加載遠程數據失敗的時候觸發 alert('在加載遠程數據失敗的時候觸發'); } }); });
onSelect record 在用戶選擇列表項的時候觸發。
$(function () { $('#box').combobox({ valueField: 'id', //設置下拉框的value值，如果是遠程數據設置數據庫指定的字段為value值 textField: 'user', //設置下拉框的text值，如果是遠程數據設置數據庫指定的字段為text值 url: 'content.json', //URL 加載遠程列表數據 // groupField: 'xb', //通過數據庫一個字段來分組如通過性別字段分組 onSelect:function () { //在用戶選擇列表項的時候觸發 alert('在用戶選擇列表項的時候觸發'); } }); });
onUnselect record 在用戶取消選擇列表項的時候觸發。
$(function () { $('#box').combobox({ valueField: 'id', //設置下拉框的value值，如果是遠程數據設置數據庫指定的字段為value值 textField: 'user', //設置下拉框的text值，如果是遠程數據設置數據庫指定的字段為text值 url: 'content.json', //URL 加載遠程列表數據 // groupField: 'xb', //通過數據庫一個字段來分組如通過性別字段分組 onUnselect:function () { //在用戶取消選擇列表項的時候觸發 alert('在用戶取消選擇列表項的時候觸發'); } }); $('#ann').click(abc); //點擊按鈕后 function abc() { $('#box').combobox('unselect', 1); //取消選擇列表 } });
三．方法列表
options none 返回屬性對象。
$(function () { $('#box').combobox({ valueField: 'id', //設置下拉框的value值，如果是遠程數據設置數據庫指定的字段為value值 textField: 'user', //設置下拉框的text值，如果是遠程數據設置數據庫指定的字段為text值 url: 'content.json', //URL 加載遠程列表數據 }); var shux = $('#box').combobox('options'); //返回屬性對象 $.each(shux, function (attr, value) { //遍歷 JavaScript 原生態的對象數組 alert(attr + ':' + value); }); });
getData none 返回加載數據。
loadData data 讀取本地列表數據。
$(function () { $('#box').combobox({ valueField: 'id', //設置下拉框的value值，如果是遠程數據設置數據庫指定的字段為value值 textField: 'user', //設置下拉框的text值，如果是遠程數據設置數據庫指定的字段為text值 // url: 'content.json', //URL 加載遠程列表數據 }); $('#box').combobox('loadData',[{ //讀取本地列表數據。 "user" : "蠟筆小新", "email" : "xiaoxin@163.com", "date" : "2014-10-1", "id":"1", "xb":"男" }]); });
reload url 請求遠程列表數據。通過'url'參數重寫原始URL 值。
setValues values 設置下拉列表框值數組。設置下拉列表框values值，數組方式也就是設置多個值
setValue value 設置下拉列表框的值。
$(function () { $('#box').combobox({ valueField: 'id', //設置下拉框的value值，如果是遠程數據設置數據庫指定的字段為value值 textField: 'user', //設置下拉框的text值，如果是遠程數據設置數據庫指定的字段為text值 url: 'content.json', //URL 加載遠程列表數據 }); $('#box').combobox('setValue','555'); //設置下拉列表框的值 });
clear none 清除下拉列表框的值。
$(function () { $('#box').combobox({ valueField: 'id', //設置下拉框的value值，如果是遠程數據設置數據庫指定的字段為value值 textField: 'user', //設置下拉框的text值，如果是遠程數據設置數據庫指定的字段為text值 url: 'content.json', //URL 加載遠程列表數據 }); $('#box').combobox('clear'); //清除下拉列表框的值 });
select value 選擇指定項。
$(function () { $('#box').combobox({ valueField: 'id', //設置下拉框的value值，如果是遠程數據設置數據庫指定的字段為value值 textField: 'user', //設置下拉框的text值，如果是遠程數據設置數據庫指定的字段為text值 url: 'content.json', //URL 加載遠程列表數據 }); $('#box').combobox('select',2); //選擇指定項 });
unselect value 取消選擇指定項。
$(function () { $('#box').combobox({ valueField: 'id', //設置下拉框的value值，如果是遠程數據設置數據庫指定的字段為value值 textField: 'user', //設置下拉框的text值，如果是遠程數據設置數據庫指定的字段為text值 url: 'content.json', //URL 加載遠程列表數據 // groupField: 'xb', //通過數據庫一個字段來分組如通過性別字段分組 onUnselect:function () { //在用戶取消選擇列表項的時候觸發 alert('在用戶取消選擇列表項的時候觸發'); } }); $('#ann').click(abc); //點擊按鈕后 function abc() { $('#box').combobox('unselect', 1); //取消選擇列表 } });