jQuery EasyUI，ComboBox(下拉列表框)組件，可以遠(yuǎn)程加載數(shù)據(jù)的下拉列表組件

?

學(xué)習(xí)要點(diǎn)：

　　1.加載方式

　　2.屬性列表

　　3.事件列表

　　4.方法列表

?

本節(jié)課重點(diǎn)了解 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元素執(zhí)行，(下拉列表框)組件

?

$(function () {$('#box').combobox({valueField: 'id',textField: 'user',url: 'content.json',}); });

?

?

二．屬性列表

?

遠(yuǎn)程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" : "黑崎一護(hù)","email" : "yihu@163.com","date" : "2014-10-3","id":"3","xb":"男"},{"user" : "黑崎2護(hù)","email" : "yihu@163.com","date" : "2014-10-3","id":"4","xb":"女"},{"user" : "黑崎3護(hù)","email" : "yihu@163.com","date" : "2014-10-3","id":"5","xb":"男"},{"user" : "黑崎4護(hù)","email" : "yihu@163.com","date" : "2014-10-3","id":"6","xb":"女"},{"user" : "黑崎5護(hù)","email" : "yihu@163.com","date" : "2014-10-3","id":"7","xb":"男"}]

?

valueField ? string 基礎(chǔ)數(shù)據(jù)值名稱綁定到該下拉列表框。默認(rèn)為 value。設(shè)置下拉框的value值，如果是遠(yuǎn)程數(shù)據(jù)設(shè)置數(shù)據(jù)庫指定的字段為value值

$(function () {$('#box').combobox({valueField: 'id', //設(shè)置下拉框的value值，如果是遠(yuǎn)程數(shù)據(jù)設(shè)置數(shù)據(jù)庫指定的字段為value值textField: 'user', //設(shè)置下拉框的text值，如果是遠(yuǎn)程數(shù)據(jù)設(shè)置數(shù)據(jù)庫指定的字段為text值url: 'content.json', //URL 加載遠(yuǎn)程列表數(shù)據(jù) }); });

?

?

textField ? string 基礎(chǔ)數(shù)據(jù)字段名稱綁定到該下拉列表框。默認(rèn)值 text。設(shè)置下拉框的text值，如果是遠(yuǎn)程數(shù)據(jù)設(shè)置數(shù)據(jù)庫指定的字段為text值

$(function () {$('#box').combobox({valueField: 'id', //設(shè)置下拉框的value值，如果是遠(yuǎn)程數(shù)據(jù)設(shè)置數(shù)據(jù)庫指定的字段為value值textField: 'user', //設(shè)置下拉框的text值，如果是遠(yuǎn)程數(shù)據(jù)設(shè)置數(shù)據(jù)庫指定的字段為text值url: 'content.json', //URL 加載遠(yuǎn)程列表數(shù)據(jù) }); });

?

groupField ? string 指定分組的字段名稱。默認(rèn)值 null。通過數(shù)據(jù)庫一個字段來分組如通過性別字段分組

$(function () {$('#box').combobox({valueField: 'id', //設(shè)置下拉框的value值，如果是遠(yuǎn)程數(shù)據(jù)設(shè)置數(shù)據(jù)庫指定的字段為value值textField: 'user', //設(shè)置下拉框的text值，如果是遠(yuǎn)程數(shù)據(jù)設(shè)置數(shù)據(jù)庫指定的字段為text值url: 'content.json', //URL 加載遠(yuǎn)程列表數(shù)據(jù)groupField:'xb' //通過數(shù)據(jù)庫一個字段來分組如通過性別字段分組 }); });

?

groupFormatter ? function(group)返回格式化后的分組標(biāo)題文本，以顯示分組項(xiàng)

$(function () {$('#box').combobox({valueField: 'id', //設(shè)置下拉框的value值，如果是遠(yuǎn)程數(shù)據(jù)設(shè)置數(shù)據(jù)庫指定的字段為value值textField: 'user', //設(shè)置下拉框的text值，如果是遠(yuǎn)程數(shù)據(jù)設(shè)置數(shù)據(jù)庫指定的字段為text值url: 'content.json', //URL 加載遠(yuǎn)程列表數(shù)據(jù)groupField:'xb', //通過數(shù)據(jù)庫一個字段來分組如通過性別字段分組groupFormatter:function (group) { //返回格式化后的分組標(biāo)題文本，以顯示分組項(xiàng)return '('+group+')';}}); });

?

?

mode ? string定義了當(dāng)文本改變時如何讀取列表數(shù)據(jù)。設(shè)置為'remote'時，下拉列表框?qū)姆?wù)器加載數(shù)據(jù)。當(dāng)設(shè)置為“remote”模式時，用戶輸入將被發(fā)送到名為'q'的 HTTP 請求參數(shù)到服務(wù)器檢索新數(shù)據(jù)。

$(function () {$('#box').combobox({valueField: 'id', //設(shè)置下拉框的value值，如果是遠(yuǎn)程數(shù)據(jù)設(shè)置數(shù)據(jù)庫指定的字段為value值textField: 'user', //設(shè)置下拉框的text值，如果是遠(yuǎn)程數(shù)據(jù)設(shè)置數(shù)據(jù)庫指定的字段為text值url: 'content.json', //URL 加載遠(yuǎn)程列表數(shù)據(jù)groupField:'xb', //通過數(shù)據(jù)庫一個字段來分組如通過性別字段分組groupFormatter:function (group) { //返回格式化后的分組標(biāo)題文本，以顯示分組項(xiàng)return '('+group+')';},mode:'remote' //向服務(wù)器傳遞輸入值來索引 }); });

?

url ? string 通過 URL 加載遠(yuǎn)程列表數(shù)據(jù)。

$(function () {$('#box').combobox({valueField: 'id', //設(shè)置下拉框的value值，如果是遠(yuǎn)程數(shù)據(jù)設(shè)置數(shù)據(jù)庫指定的字段為value值textField: 'user', //設(shè)置下拉框的text值，如果是遠(yuǎn)程數(shù)據(jù)設(shè)置數(shù)據(jù)庫指定的字段為text值 url: 'content.json', //URL 加載遠(yuǎn)程列表數(shù)據(jù) }); });

?

method ? string HTTP 方法檢索數(shù)據(jù)(POST / GET)。設(shè)置遠(yuǎn)程提交方式

?

data ? array 數(shù)據(jù)列表加載。本地化獲取數(shù)據(jù)

$(function () {$('#box').combobox({valueField: 'id', //設(shè)置下拉框的value值，如果是遠(yuǎn)程數(shù)據(jù)設(shè)置數(shù)據(jù)庫指定的字段為value值textField: 'user', //設(shè)置下拉框的text值，如果是遠(yuǎn)程數(shù)據(jù)設(shè)置數(shù)據(jù)庫指定的字段為text值// url: 'content.json', //URL 加載遠(yuǎn)程列表數(shù)據(jù)groupField:'xb', //通過數(shù)據(jù)庫一個字段來分組如通過性別字段分組groupFormatter:function (group) { //返回格式化后的分組標(biāo)題文本，以顯示分組項(xiàng)return '('+group+')';},mode: 'remote', //向服務(wù)器傳遞輸入值來索引 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定義當(dāng)'mode'設(shè)置為'local'時如何過濾本地數(shù)據(jù)，函數(shù)有 2 個參數(shù)：q：用戶輸入的文本。row：列表行數(shù)據(jù)。返回 true 的時候允許行顯示。過濾查找，mode不設(shè)置的情況下使用

$(function () {$('#box').combobox({valueField: 'id', //設(shè)置下拉框的value值，如果是遠(yuǎn)程數(shù)據(jù)設(shè)置數(shù)據(jù)庫指定的字段為value值textField: 'user', //設(shè)置下拉框的text值，如果是遠(yuǎn)程數(shù)據(jù)設(shè)置數(shù)據(jù)庫指定的字段為text值url: 'content.json', //URL 加載遠(yuǎn)程列表數(shù)據(jù)groupField: 'xb', //通過數(shù)據(jù)庫一個字段來分組如通過性別字段分組groupFormatter: function (group) { //返回格式化后的分組標(biāo)題文本，以顯示分組項(xiàng)return '(' + group + ')';},filter: function (q, row) {var opts = $(this).combobox('options');return row[opts.textField].indexOf(q) >= 0;},}); });

?

formatter ? function 定義如何渲染行。該函數(shù)接受 1 個參數(shù)：row。格式化下拉選項(xiàng)

$(function () {$('#box').combobox({valueField: 'id', //設(shè)置下拉框的value值，如果是遠(yuǎn)程數(shù)據(jù)設(shè)置數(shù)據(jù)庫指定的字段為value值textField: 'user', //設(shè)置下拉框的text值，如果是遠(yuǎn)程數(shù)據(jù)設(shè)置數(shù)據(jù)庫指定的字段為text值url: 'content.json', //URL 加載遠(yuǎn)程列表數(shù)據(jù)groupField: 'xb', //通過數(shù)據(jù)庫一個字段來分組如通過性別字段分組groupFormatter: function (group) { //返回格式化后的分組標(biāo)題文本，以顯示分組項(xiàng)return '(' + group + ')';},formatter: function (row) { //格式化下拉選項(xiàng)var opts = $(this).combobox('options');return '[' + row[opts.textField] + ']';}}); });

?

loader ? function(param,success,error)定義了如何從遠(yuǎn)程服務(wù)器加載數(shù)據(jù)。返回false 可以忽略該動作。該函數(shù)具備如下參數(shù)：param：傳遞到遠(yuǎn)程服務(wù)器的參數(shù)對象。success(data)：在檢索數(shù)據(jù)成功的時候調(diào)用該回調(diào)函數(shù)。error()：在檢索數(shù)據(jù)失敗的時候調(diào)用該回調(diào)函數(shù)。

?

loadFilter function(data) 返回過濾后的數(shù)據(jù)并顯示。

?

?

三．事件列表

onBeforeLoad ? param在請求加載數(shù)據(jù)之前觸發(fā)，返回 false 取消該加載動作。

$(function () {$('#box').combobox({valueField: 'id', //設(shè)置下拉框的value值，如果是遠(yuǎn)程數(shù)據(jù)設(shè)置數(shù)據(jù)庫指定的字段為value值textField: 'user', //設(shè)置下拉框的text值，如果是遠(yuǎn)程數(shù)據(jù)設(shè)置數(shù)據(jù)庫指定的字段為text值url: 'content.json', //URL 加載遠(yuǎn)程列表數(shù)據(jù)// groupField: 'xb', //通過數(shù)據(jù)庫一個字段來分組如通過性別字段分組onBeforeLoad:function () { //在請求加載數(shù)據(jù)之前觸發(fā)，返回 false 取消該加載動作。alert('在請求加載數(shù)據(jù)之前觸發(fā)');}}); });

?

onLoadSuccess ? none 在加載遠(yuǎn)程數(shù)據(jù)成功的時候觸發(fā)。

$(function () {$('#box').combobox({valueField: 'id', //設(shè)置下拉框的value值，如果是遠(yuǎn)程數(shù)據(jù)設(shè)置數(shù)據(jù)庫指定的字段為value值textField: 'user', //設(shè)置下拉框的text值，如果是遠(yuǎn)程數(shù)據(jù)設(shè)置數(shù)據(jù)庫指定的字段為text值url: 'content.json', //URL 加載遠(yuǎn)程列表數(shù)據(jù)// groupField: 'xb', //通過數(shù)據(jù)庫一個字段來分組如通過性別字段分組onLoadSuccess:function () { //在加載遠(yuǎn)程數(shù)據(jù)成功的時候觸發(fā)alert('在加載遠(yuǎn)程數(shù)據(jù)成功的時候觸發(fā)');}}); });

?

onLoadError ? none 在加載遠(yuǎn)程數(shù)據(jù)失敗的時候觸發(fā)。

$(function () {$('#box').combobox({valueField: 'id', //設(shè)置下拉框的value值，如果是遠(yuǎn)程數(shù)據(jù)設(shè)置數(shù)據(jù)庫指定的字段為value值textField: 'user', //設(shè)置下拉框的text值，如果是遠(yuǎn)程數(shù)據(jù)設(shè)置數(shù)據(jù)庫指定的字段為text值url: 'content2.json', //URL 加載遠(yuǎn)程列表數(shù)據(jù)// groupField: 'xb', //通過數(shù)據(jù)庫一個字段來分組如通過性別字段分組onLoadError:function () { //在加載遠(yuǎn)程數(shù)據(jù)失敗的時候觸發(fā)alert('在加載遠(yuǎn)程數(shù)據(jù)失敗的時候觸發(fā)');}}); });

?

onSelect ? record 在用戶選擇列表項(xiàng)的時候觸發(fā)。

$(function () {$('#box').combobox({valueField: 'id', //設(shè)置下拉框的value值，如果是遠(yuǎn)程數(shù)據(jù)設(shè)置數(shù)據(jù)庫指定的字段為value值textField: 'user', //設(shè)置下拉框的text值，如果是遠(yuǎn)程數(shù)據(jù)設(shè)置數(shù)據(jù)庫指定的字段為text值url: 'content.json', //URL 加載遠(yuǎn)程列表數(shù)據(jù)// groupField: 'xb', //通過數(shù)據(jù)庫一個字段來分組如通過性別字段分組onSelect:function () { //在用戶選擇列表項(xiàng)的時候觸發(fā)alert('在用戶選擇列表項(xiàng)的時候觸發(fā)');}}); });

?

onUnselect ? record 在用戶取消選擇列表項(xiàng)的時候觸發(fā)。

$(function () {$('#box').combobox({valueField: 'id', //設(shè)置下拉框的value值，如果是遠(yuǎn)程數(shù)據(jù)設(shè)置數(shù)據(jù)庫指定的字段為value值textField: 'user', //設(shè)置下拉框的text值，如果是遠(yuǎn)程數(shù)據(jù)設(shè)置數(shù)據(jù)庫指定的字段為text值url: 'content.json', //URL 加載遠(yuǎn)程列表數(shù)據(jù)// groupField: 'xb', //通過數(shù)據(jù)庫一個字段來分組如通過性別字段分組onUnselect:function () { //在用戶取消選擇列表項(xiàng)的時候觸發(fā)alert('在用戶取消選擇列表項(xiàng)的時候觸發(fā)');}});$('#ann').click(abc); //點(diǎn)擊按鈕后function abc() {$('#box').combobox('unselect', 1); //取消選擇列表 }});

?

?

三．方法列表

?

options ? none 返回屬性對象。

$(function () {$('#box').combobox({valueField: 'id', //設(shè)置下拉框的value值，如果是遠(yuǎn)程數(shù)據(jù)設(shè)置數(shù)據(jù)庫指定的字段為value值textField: 'user', //設(shè)置下拉框的text值，如果是遠(yuǎn)程數(shù)據(jù)設(shè)置數(shù)據(jù)庫指定的字段為text值url: 'content.json', //URL 加載遠(yuǎn)程列表數(shù)據(jù) });var shux = $('#box').combobox('options'); //返回屬性對象$.each(shux, function (attr, value) { //遍歷 JavaScript 原生態(tài)的對象數(shù)組alert(attr + ':' + value);}); });

?

getData ? none 返回加載數(shù)據(jù)。

loadData ? data 讀取本地列表數(shù)據(jù)。

$(function () {$('#box').combobox({valueField: 'id', //設(shè)置下拉框的value值，如果是遠(yuǎn)程數(shù)據(jù)設(shè)置數(shù)據(jù)庫指定的字段為value值textField: 'user', //設(shè)置下拉框的text值，如果是遠(yuǎn)程數(shù)據(jù)設(shè)置數(shù)據(jù)庫指定的字段為text值// url: 'content.json', //URL 加載遠(yuǎn)程列表數(shù)據(jù) });$('#box').combobox('loadData',[{ //讀取本地列表數(shù)據(jù)。"user" : "蠟筆小新","email" : "xiaoxin@163.com","date" : "2014-10-1","id":"1","xb":"男"}]);});

?

reload ? url 請求遠(yuǎn)程列表數(shù)據(jù)。通過'url'參數(shù)重寫原始URL 值。

setValues ? values 設(shè)置下拉列表框值數(shù)組。設(shè)置下拉列表框values值，數(shù)組方式也就是設(shè)置多個值

setValue ? value 設(shè)置下拉列表框的值。?

$(function () {$('#box').combobox({valueField: 'id', //設(shè)置下拉框的value值，如果是遠(yuǎn)程數(shù)據(jù)設(shè)置數(shù)據(jù)庫指定的字段為value值textField: 'user', //設(shè)置下拉框的text值，如果是遠(yuǎn)程數(shù)據(jù)設(shè)置數(shù)據(jù)庫指定的字段為text值url: 'content.json', //URL 加載遠(yuǎn)程列表數(shù)據(jù) });$('#box').combobox('setValue','555'); //設(shè)置下拉列表框的值 });

?

clear ? none 清除下拉列表框的值。

$(function () {$('#box').combobox({valueField: 'id', //設(shè)置下拉框的value值，如果是遠(yuǎn)程數(shù)據(jù)設(shè)置數(shù)據(jù)庫指定的字段為value值textField: 'user', //設(shè)置下拉框的text值，如果是遠(yuǎn)程數(shù)據(jù)設(shè)置數(shù)據(jù)庫指定的字段為text值url: 'content.json', //URL 加載遠(yuǎn)程列表數(shù)據(jù) });$('#box').combobox('clear'); //清除下拉列表框的值 });

?

select ? value 選擇指定項(xiàng)。

$(function () {$('#box').combobox({valueField: 'id', //設(shè)置下拉框的value值，如果是遠(yuǎn)程數(shù)據(jù)設(shè)置數(shù)據(jù)庫指定的字段為value值textField: 'user', //設(shè)置下拉框的text值，如果是遠(yuǎn)程數(shù)據(jù)設(shè)置數(shù)據(jù)庫指定的字段為text值url: 'content.json', //URL 加載遠(yuǎn)程列表數(shù)據(jù) }); $('#box').combobox('select',2); //選擇指定項(xiàng) });

?

unselect ? value 取消選擇指定項(xiàng)。

?

$(function () {$('#box').combobox({valueField: 'id', //設(shè)置下拉框的value值，如果是遠(yuǎn)程數(shù)據(jù)設(shè)置數(shù)據(jù)庫指定的字段為value值textField: 'user', //設(shè)置下拉框的text值，如果是遠(yuǎn)程數(shù)據(jù)設(shè)置數(shù)據(jù)庫指定的字段為text值url: 'content.json', //URL 加載遠(yuǎn)程列表數(shù)據(jù)// groupField: 'xb', //通過數(shù)據(jù)庫一個字段來分組如通過性別字段分組onUnselect:function () { //在用戶取消選擇列表項(xiàng)的時候觸發(fā)alert('在用戶取消選擇列表項(xiàng)的時候觸發(fā)');}});$('#ann').click(abc); //點(diǎn)擊按鈕后function abc() {$('#box').combobox('unselect', 1); //取消選擇列表 }});

?

轉(zhuǎn)載于:https://www.cnblogs.com/adc8868/p/6713962.html

總結(jié)

以上是生活随笔為你收集整理的第二百二十三节，jQuery EasyUI，ComboBox(下拉列表框)组件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。