easyui combobox下拉框实现多选框以及全选、全不选的实现

实现效果以下图：

当勾选全选的时候，能够选中下列全部的选项，当取消勾选时可取消全部勾选。

废话很少说 贴代码吧：

前端代码:

//这里的id是上面的combobox的id,由于我要在点击一个按钮的以后再动态的加载出来，因此我把它单独的抽取出来了。若是须要一开始就加载数据加载方式为：
$(function(){
initCombobox(id);//id为你上面的控件id，例如个人控件id为fhry,那么我这里调用就是initCombobox(fhry);这个方法能够放在任何一个function中调用。
)
function initCombobox(id){
            var value="";
            $('#'+id).combobox({
                url: '${base}/ht/getComboboxData.action?dictionaryCode='+code',//你要加载数据的后台连接
                method:'post',
                panelHeight:200,
                valueField:'text',
                textField:'text',
                multiple:true, 
                queryParams : {
                        xlname:$('#xltree').tree('getSelected').text,
                         whqd:selectgd
                }//参数，可根据本身的须要来修改或者不要
                formatter:function(row){
                    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  
                    var name=$("#"+id).val($(this).combobox('getValues'));
                      //当点击全选时，则勾中全部的选项                    
                      if(name="全选"){
                        var a= $("#"+id).combobox('getData');
                         for(var i=0;i<a.length;i++){
                              var el = opts.finder.getEl(this, a[i].text);  
                             el.find('input.combobox-checkbox')._propAttr('checked', true); 
                        } 
                     }
                   //设置选中值所对应的复选框为选中状态  
                    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')); 
                    //当取消全选勾中时，则取消全部的勾选                    
                    if($(this).combobox('getValues')=="全选"){
                        var a= $("#"+id).combobox('getData');
                        for(var i=0;i<a.length;i++){
                            var el = opts.finder.getEl(this, a[i].text);  
                           el.find('input.combobox-checkbox')._propAttr('checked', false); 
                          } 
                    }
                    var el = opts.finder.getEl(this, row[opts.valueField]);  
                    el.find('input.combobox-checkbox')._propAttr('checked', false);  
                }  
            });  
                
        }
 咱们在选中和取消选中的时候都经过：$(this).combobox('getValues')获取一下combobox的值，而后再将获取的值赋值给$("#"+id).val($(this).combobox('getValues'))

后台获取下拉框数据的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方法主要是为了从数据库获取下拉框的要加载的数据

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

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

     二、但是前台传递过来的值，咱们在后台是不能直接用的，由于它是有一个字符串，

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

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 + " ) " ;                               }