【EasyUI】Combobox的聯動和onChange/onSelect事件綁定

【效果圖】

(1)當選擇「產品名稱」這個查詢項目時，運算條件只有「等於」和「不等於」，以下圖所示。

(2)當用戶選擇能夠進行數值計算的查詢項目時，運算條件就會有不少，以下圖所示。

 

【實現代碼】

一、HTML代碼

<table cellpadding="0" cellspacing="1" border="0">
    <tr>    
        <td>選擇查詢項目：</td>                        
        <td><input id="queryItem" name="queryItem" class="easyui-combobox" style="width:130px;" ></td>
        <!-- 用戶選擇運算條件 -->                                            
        <td><input id="operType" name="operType" class="easyui-combobox" style="width:90px;" data-options="panelHeight:150"/></td>
        <!-- 用戶輸入文本條件 -->
        <td><input id="userInputCondition" name="userInputCondition" type="text" style="width:200px;"></input></td>                            
    </tr>                        
</table>

二、JSP代碼

注意，代碼要寫在「$(function(){})」中，這樣頁面被加載時，就能夠綁定「查詢項目」這個組件的事件。

$( function(){
    var queryItemData = [{text : "產品名稱", value : "prodName"}, 
                         {text : "年化收益率", value : "ars"},
                         {text : "到期收益率", value : "ytm"},
                         {text : "最低出借金額", value : "lowLendEdu"},
                         {text : "最高出借金額", value : "higLendEdu"},
                         {text : "出借週期", value : "lendingCycle"},                                                                                 
                         {text : "產品狀態", value : "prodStatus"}];
    
    var options01 = [{text : "等於", value : "eq"}, 
                     {text : "不等於", value : "ne"}];
    
    var options02 = [{text : "等於", value : "eq"}, 
                     {text : "大於且等於", value : "ge"},
                     {text : "大於", value : "gt"},
                     {text : "小於且等於", value : "le"},
                     {text : "小於", value : "lt"},
                     {text : "不等於", value : "ne"}];                                                             
     
     //初始化查詢項目的下拉列表
     $("#queryItem").combobox({
         valueField: 'value',
         textField: 'text',                                          
         data : queryItemData,
         panelHeight:170,    
        //註冊Easy-UI, combobox的onSeclete事件    
        //目的：實現理財產品中，高級查詢的「運算條件」隨着「查詢項目」的改變而發生聯動。
        onSelect : function(){
                var myOptValue = $("#queryItem").combobox("getValue") ;
                
                //1.清空原來的operType這個combobox中的選項
                $("#operType").combobox("clear");
                
                //2.動態添加"操做類型"的下拉列表框的option                            
                if( myOptValue != null && (myOptValue == 'prodName' || myOptValue == 'prodStatus') ){
                    console.info("myOptValue = "+myOptValue);                        
                    $("#operType").combobox({
                        panelHeight:50,
                        data : options01
                    });
                }else{
                    $("#operType").combobox({
                        panelHeight:140,
                        data : options02                                
                    });
                }

                //3.清空文本輸入框——用戶輸入的條件                            
                $("#userInputCondition").val("");
            }                      
     });                    
    
     //初始化operType的下拉列表
     $("#operType").combobox({
         valueField: 'value',
         textField: 'text',                                          
         data : options02,
         panelHeight:140,                     
     });                     
});
});

 

三、EasyUI，comobox綁定onChange事件的連接:http://www.stepday.com/topic/?235