jQuery EasyUI -ComboBox（下拉列表框）

一、combobox 前台頁面動態加載顯示

判斷輸入值在下拉列表是否存在 
var nameStr =''; 
    $(document).ready(function(){ 

        $('#customerId').combobox({  
            prompt:'請輸入或選擇客戶名稱', 　　//prompt屬性為沒有選中任何選項的時候顯示的標簽 如“--性別--”
            url:'${rc.contextPath}/sale/findBusinessPartnerByName',  
            valueField:'id',  
            textField:'text' , 
            onClick: function(node) { 
                attributeShow($("#customerId").combotree("getValue")); 
            }, 
            filter: function(q, row){ 　　　　//filter屬性模糊查詢
                var opts = $(this).combobox('options'); 
                //return row[opts.textField].indexOf(q) == 0; 
                return row[opts.textField].indexOf(q)>-1;//將從頭位置匹配改為任意匹配 
            }, 
            onLoadSuccess: function(){ 
                var partnerId = '${(saleOrder.partnerId)!}'; 
                if(partnerId){ 
                    $('#customerId').combobox('setValue',partnerId); 
                } 
            }, 
            onSelect: function(){ 
                var partnerId = $("#customerId").combotree("getValue"); 
                $("#business_partner_id").val(partnerId); 
                findBusinessPartnerContactByPartnerId(partnerId); 
                findSaleAddressByPartnerId(partnerId); 
            }, 
            onChange: function(newValue, oldValue){ 
                var v = $("#customerId").combotree("getText"); 
                var arr = nameStr.split(','); 
                var index = $.inArray(v, arr); 
                if(index < 0 ){    
                    $("#business_partner_id").val(''); 
                }else{ 
$("#business_partner_id").val($("#customerId").combobox("getValue")); 
} 
            }, 
            formatter: function(row){ 
                var opts = $(this).combobox('options'); 
                nameStr += row[opts.textField] + "," ; 
                return row[opts.textField]; 
            } 
        }); 

    });

 

 

Combobox用法和方法參數:

1、 需要引入class=" easyui-combobox”

2、 參數設置需要在data-options中設置

3、 屬性參數配置：

valueField：基礎數據值名稱綁定到Combobox(提交值)

textField：基礎數據的字段名稱綁定的Combobox（顯示值）

mode:定義當文本改變時如何加載列表數據，當設置為remote模式下，什么類型的用戶將被發送http請求參數名為'q'的服務器，以獲取新的數據。

url：從遠程URL來加載列表數據

method：http方法檢索列表數據

data：列表中被加載的數據

filter：定義如何過濾本地數據“模式”設置為'local'

formatter：定義如何呈現行

loader：定義如何從遠程服務器加載數據

4、 事件：

onBeforeLoad(param): 操作之前將數據加載，返回false就取消這個荷載作用

onLoadSuccess():觸發時，遠程數據加載成功

onLoadError：觸發時，遠程數據加載錯誤

ONSELECT：觸發，當用戶選擇一個列表項

onUnselect：觸發，當用戶取消選擇一個列表

5、方法：

options()：返回選擇對象

getData():返回加載的數據

loadData(data):加載列表數據

reload(url):重新加載遠程數據列表

setValues(values):設置combobox的值數組

setValue(value):設置combobox的值

clear():清空combobox的值

select(value):選中指定的值

unselect(value):取消指定的值

 

 

 

二、創建combobox

官方API指出，創建combobox有三種方式：

1、通過<select>標簽

<select id="cc" class="easyui-combobox" name="dept" style="width:200px;">
    <option value="aa">aitem1</option>
</select>

 

2、通過<input>標簽

<input id="cc" class="easyui-combobox" name="dept" data-options="valueField:'id',textField:'text',url:'get_data.php'" />

 

3、通過<input>標簽和Javascript代碼

<input id="cc" name="dept" value="aa">

$('#cc').combobox({
    url:'combobox_data.json',
    valueField:'id',
    textField:'text'
});

三者孰優孰劣就不贅述了。原理很簡單：創建一個容器；把數據放入容器。創建容器最簡單莫過於HTML標簽，插入數據最靈活莫過於Javascript動態處理。

 

4、例子

生成combobox的數據一般從服務器數據獲得，所以，通常的用法應該是這樣：

$.ajax({
    url : url,
    async : false,  　　//同步方式運行
    success : function(d) {
        $("#organTypeNo").combobox({
            valueField : 'id',
            textField : 'text',
            editable : true,
            required : true,
            mode : 'local',
            data: d.rows
        });
    }
});

AJAX請求的JSON數據格式如下：

{
"total":1,
"rows":[{"id":"U010101","text":"鞋類"}]
}

 

三、combobox本地模糊查詢

需求：查詢下拉框指定數據

 

例如：輸入漢字“北”

出現很多包含漢字“北”的結果，實際上，EasyUI自帶的查詢功能只能查出以“北”開頭的內容，而無法查出“北”在其他位置的數據，這由EasyUI的filter所限制：

 

var opts = $(this).combobox('options');
return row[opts.textField].indexOf(q) == 0;

要實現自定義效果，需覆蓋EasyUI的filter

 

 

//combobox可編輯
$.fn.combobox.defaults.editable = true;
//combobox自定義模糊查詢
$.fn.combobox.defaults.filter = function(q, row){
    var opts = $(this).combobox('options');
    return row[opts.textField].indexOf(q) >= 0;
};

說明：filter屬性僅用於過濾本地已經加載的數據，而不能過濾遠程數據。filter實現的原理很簡單：遍歷所有數據並與輸入字符匹配，匹配結果為true則顯示，反之隱藏。EasyUI還有另一個BUG，當輸入框輸入的字符串和下拉框中某一個完全匹配時，EasyUI會自動選中這一項，再手動點擊不會觸發onSelect事件，與其聯動的其他控件不會得到刷新，比如下面的代碼

 

$.ajax({
        dataType: 'json',
        url : BasePath + "/org_organ_brand/list.json?sort=order_no&order=asc&rows=50000",
        success : function(d) {
            $('#brandNo').combobox({
                valueField : 'brandNo',
                textField : 'brandCname',
                editable:true ,
                required: true,
                data : d.rows,
                onSelect:function(){//通過onSelect事件來聯動下一級下拉框
                    var brandNo = $('#brandNo').combobox('getValue');
                    var userId = $("#userId").val();
                    $.ajax({
                        dataType: 'json',
                        url : BasePath + "/org_organ_brand_detail/list.json?sort=order_no&order=desc&rows=50000&brandNo="+brandNo + "&userId=" + userId,
                        success : function(d1) {
                            $('#brandDetailNo').combotree({
                                editable:true,
                                multiple:true ,
                                required: true,
                                data : d1.rows
                            });
                        }
                    });
                }
            });
        }
    });

 

 

四、combobox數據庫模糊查詢

1、remote模式

如果我想在輸入框輸入字符然后實時向數據庫查詢，該怎么辦呢？
官方API指出：

mode

string

定義了當文本改變時如何讀取列表數據。設置為'remote'時，下拉列表框將會從服務器加載數據。當設置為“remote”模式時，用戶輸入將被發送到名為'q'的HTTP請求參數到服務器檢索新數據。

local

將mode設為 ‘remote’，為該combobox指定URL和loadFilter屬性

 

 

$("#organTypeNo").combobox({
    valueField : 'id',
    textField : 'text',
    editable : true,
    required : true,
    mode : 'remote',
    url : url,
    loadFilter : function (data) {return data.rows;}
});

設置loadFilter是為了處理返回的數據格式，如果格式正確，loadFilter無需配置。此時在下拉框輸入數據就會去請求URL的內容並顯示。

 

說明：輸入的字符將以名為‘q’的參數傳入后台，而不是添加在請求URL的后面，需要在request中捕獲該參數作為數據庫查詢條件。

2、remote和local模式切換

需求：二級聯動下拉框，下拉框二隨下拉框一的值在local和remote之間切換，怎么實現呢？

 

當然是在下拉框一變化時判斷其值，然后設置下拉框二的mode，代碼如下：

 

//店鋪特殊處理
if(organLevel == 6){
    $("#organTypeNo").combobox({
        valueField : 'id',
        textField : 'text',
        editable : true,
        required : true,
        mode : 'remote',
        url : BasePath + "/uc_store/list.json?sort=store_no&order=asc&rows=50",
        loadFilter : function (data) {return data.rows;}
    });
    return;
}
//正常處理非店鋪情況
var url = '';
if(organLevel <= 3){
    url = BasePath + "/org_organ_type/list.json?rows=20&level=" + organLevel;
}
$.ajax({
    url : url,
    success : function(d) {
        $("#organTypeNo").combobox({
            valueField : 'id',
            textField : 'text',
            editable : true,
            required : true,
            mode : 'local',
            data: d.rows
        });
    }
});

說明：與‘remote’有關的屬性有url和loadFilter，mode為‘local’時，url和loadFilter無效
但是很不幸，這樣做瀏覽器報錯，變更下拉框一的值的時候，下拉框二的mode不能隨之變化（這應該是EasyUI的BUG），僅僅當下拉框一的值變化不導致下拉框二mode變化時，二級聯動可以正常使用，一旦需要下拉框二切換mode，就會導致錯誤

 

怎么解決呢？
方法一：等EasyUI修復BUG；
方法二：下拉框一變更時重置下拉框二（把它清理的干干凈凈，不受之前設置的影響）

 

//初始化organTypeNo的combobox
var parent = $("#organTypeNo").parents("div.fitem");
$("#organTypeNo").combobox('destroy');
parent.append('<input id="organTypeNo" class="ipt" style="width:150px;"/>');

說明：因為EasyUI解析的緣故，無法使用jQuery的remove()和replaceWith()方法來實現重置，而且EasyUI沒有有效的reset方法，只能完全刪除后重建。
加上這樣的代碼應該正確了吧，運行項目，仍然報錯：

 

還需將AJAX請求聲明為同步請求

$.ajax({
    url : url,
    async : false,//聲明為同步請求
    success : function(d) {
        $("#organTypeNo").combobox({
            valueField : 'id',
            textField : 'text',
            editable : true,
            required : true,
            mode : 'local',
            data: d.rows
        });
    }
});

 

 

 

 

本節主要給大家講解組合框控件Combo Box。組合框控件Combo Box同樣相當常見，例如，在Windows系統的控制面板上設置語言或位置時，有很多選項，用來進行選擇的控件就是組合框控件。它為我們的日常操作提供了很多方便。

擴展自$.fn.combo.defaults。使用$.fn.combobox.defaults重寫默認值對象。

下拉列表框顯示一個可編輯文本框和下拉式列表，用戶可以選擇一個值或多個值。用戶可以直接輸入文本到列表頂部或選擇一個或多個當前列表中的值。

使用案例：

通過<select>元素、<input>標簽、Javascript三種方法來創建下拉列表框。

1、通過<select>元素創建一個預定義結構的下拉列表框。

<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>

2、通過<input>標簽創建下拉列表框。

<input id=”cc” class=”easyui-combobox” name=”dept”
data-options=”valueField:’id’,textField:’text’,url:’get_data.php'” />

3、使用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” 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(自定義下拉框)，下拉列表框新增的屬性如下：

屬性名	屬性值類型	描述
valueField	string	基礎數據值名稱綁定到該下拉列表框。
textField	string	基礎數據字段名稱綁定到該下拉列表框。
groupField	string	指定分組的字段名稱（譯者注：分組的字段由數據源決定）。（該屬性自1.3.4版開始可用）
groupFormatter	function(group)	返回格式化后的分組標題文本，以顯示分組項（該屬性自1.3.4版開始可用） 代碼示例：   $('#cc').combobox({ groupFormatter: function(group){ return '<span style="color:red">' + group + '</span>'; } });
mode	string	定義了當文本改變時如何讀取列表數據。設置為’remote’時，下拉列表框將會從服務器加載數據。當設置為“remote”模式時，用戶輸入將被發送至名為’q’的HTTP請求參數到服務器檢索新數據。
url	string	通過URL加載遠程列表數據。
method	string	HTTP方法檢索數據(POST / GET)。
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' }]" />
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()：在檢索數據失敗的時候調用該回調函數。
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	取消選擇指定項。