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