ITPub博客

首页 > 应用开发 > IT综合 > 【EasyUI】Combobox的联动和onChange/onSelect事件绑定

【EasyUI】Combobox的联动和onChange/onSelect事件绑定

原创 IT综合 作者:zjrodger 时间:2015-08-31 17:22:17 0 删除 编辑

【效果图】

(1)当选择“产品名称”这个查询项目时,运算条件只有“等于”和“不等于”,如下图所示。

(2)当用户选择可以进行数值计算的查询项目时,运算条件就会有很多,如下图所示。

【实现代码】

1HTML代码

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



2JSP代码

注意,代码要写在“$(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, comboboxonSeclete事件 

       //目的:实现理财产品中,高级查询的运算条件随着查询项目的改变而发生联动。

       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,              

     });                

});

});

 

3、EasyUI,comobox绑定onChange事件的链接:


来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/25851087/viewspace-1787719/,如需转载,请注明出处,否则将追究法律责任。

下一篇: 玩转log4j
请登录后发表评论 登录
全部评论