关于easyui combobox下拉框实现多选框的实现

好长时间没有更博了，一是因为最近真的比较忙，二是因为自己是真的偷懒了，哈哈

好啦，这篇博客主要是总结一些关于easyui combobox下拉框实现多选框的实现，包括前台界面的展示，和后台对数据的获取应用

一、实现的效果图如下：

二、实现

1、前台html代码：定义学术荣誉下拉框

    <td align="right" style="width: 70px;">学术荣誉：</td>  
        <td >  
              <input id="xsry" name="xsry"  style="width: 150px;"  class="easyui-combobox" >  
        </td>

2、js部分初始化学术荣誉下拉框数据

需要给大家说明一下的是，我上面展示的效果图里面加载的数据来自我自己这边的数据库字典，即来自数据库，那么就需要从后台获取数据了，下面会做详细介绍，

很多同学会很好奇我的easyui-combobox实现的效果怎么和官方的实现相比多了每个下拉选项前面的复选框，这个到底是怎么实现的，好啦，下面就将实现的代码先贴出来

满足一下大家的好奇心

    $(function(){  
      
     //初始化多选复选框  
     initCombobox('xsry','XSRY_CD');//学术荣誉的字典编码是XSRY_CD  
    )  
    //参数：id  控件id   code 字典编码  
    function initCombobox(id,code){  
                var value = "";  
                //加载下拉框复选框  
                $('#'+id).combobox({  
                    url:'${base}/ht/getComboboxData.action?dictionaryCode='+code, //后台获取下拉框数据的url  
                    method:'post',  
                    panelHeight:200,//设置为固定高度，combobox出现竖直滚动条  
                    valueField:'CODE',  
                    textField:'NAME',  
                    multiple:true,  
                    formatter: function (row) { //formatter方法就是实现了在每个下拉选项前面增加checkbox框的方法  
                        var opts = $(this).combobox('options');  
                        return '<input type="checkbox" class="combobox-checkbox">' + row[opts.textField]  
                    },  
                    onLoadSuccess: function () {  //下拉框数据加载成功调用  
                        var opts = $(this).combobox('options');  
                        var target = this;  
                        var values = $(target).combobox('getValues');//获取选中的值的values  
                        $.map(values, function (value) {  
                            var el = opts.finder.getEl(target, value);  
                            el.find('input.combobox-checkbox')._propAttr('checked', true);   
                        })  
                    },  
                    onSelect: function (row) { //选中一个选项时调用  
                        var opts = $(this).combobox('options');  
                        //获取选中的值的values  
                        $("#"+id).val($(this).combobox('getValues'));  
                         
                       //设置选中值所对应的复选框为选中状态  
                        var el = opts.finder.getEl(this, row[opts.valueField]);  
                        el.find('input.combobox-checkbox')._propAttr('checked', true);  
                    },  
                    onUnselect: function (row) {//不选中一个选项时调用  
                        var opts = $(this).combobox('options');  
                        //获取选中的值的values  
                        $("#"+id).val($(this).combobox('getValues'));  
                        
                        var el = opts.finder.getEl(this, row[opts.valueField]);  
                        el.find('input.combobox-checkbox')._propAttr('checked', false);  
                    }  
                });  
            }

我们在选中和取消选中的时候都通过：$(this).combobox('getValues')获取一下combobox的值，然后再将获取的值赋值给$("#xsry").val($(this).combobox('getValues'))

然后我们就可以通过$("#xsry").val()轻松获取多选的值了。

3、后台获取下拉框数据的url: '${base}/ht/getComboboxData.action?dictionaryCode='+code, 代码实现如下：

Controller层：

    @RequestMapping(value = "/getComboboxData")  
        @ResponseBody  
        public String getComboboxData(HttpServletRequest request,String dictionaryCode) {  
              
            String data ;  
            JSONObject json = new JSONObject();  
            JSONArray array = new JSONArray();  
            try{  
                List<Map> resultList = tPersonService.getComboboxData(dictionaryCode);  
                if(!resultList.isEmpty()){  
                    for(Map<String,Object> lb : resultList){  
                        json.put("CODE", lb.get("CODE"));  
                        json.put("NAME", lb.get("NAME"));             
                        array.add(json);  
                    }  
                }  
                data =  array.toString();  
            } catch (Exception e) {  
                data = "{}" ;  
            }  
            return data;  
        }

Service 层：

    public List<Map> getComboboxData(String dictionaryCode) {  
               String sql = "select * from cendic.d_dictionary_item t where t.d_code= ?  order by  t.code" ;  
               Query query = commonDao.createSQLQuery(sql, null, null,new Object[]{dictionaryCode});  
               List<Map> list = query.setResultTransformer(Transformers.ALIAS_TO_ENTITY_MAP).list();  
               return list;  
        }

getComboboxData方法主要是为了从数据库获取下拉框的要加载的数据

其实我要获取这个下拉框选中的多个值，主要是为了实现我的查询功能，因为这些选中的值将作为我在人员信息表中查询人员信息的查询条件，这就涉及到我们需要将下拉框获取的值传递到后台，然后拆分出每个值，然后写入数据库查询语句，进行查询

1、将值传递到后台很简单，我在这里不在多做说明，因为我们前台已经通过 $("#xsry").val()获取到了选中的值的，比如获取的值为：“1，2，3”

2、可是前台传递过来的值，我们在后台是不能直接用的，因为它是有一个字符串，

后台如何将获取的值进行拆分，写成数据库可以识别的查询语句，代码如下：

    String xsry = param.get("xsry").toString(); //获取前台传过来的值"1,2,3"  
    if(StringUtils.isNotBlank(xsry)){  
        String[] array = xsry.split(",") ; //拆分字符串，分隔符为','  
        String temp = "";  
        for (int i = 0; i < array.length; i++) //这个FOR循环就是加单引号  
            {  
                 array[i] = "'" + array[i] + "'";    
            }  
            temp = StringUtils.join(array, ","); //temp变为 '1','2','3'  
              
        //sql :变成了A.XSRY in ('1','2','3')             
        sql += "   AND A.XSRY in  ( " + temp + " ) " ;   
                          
            }

关于easyui combobox下拉框实现多选框的实现

猜你喜欢