關於easyui combobox下拉框實現多選框的實現

好長時間沒有更博了，一是因為最近真的比較忙，二是因為自己是真的偷懶了，哈哈

     好啦，這篇博客主要是總結一些關於easyui combobox下拉框實現多選框的實現，包括前台界面的展示，和后台對數據的獲取應用

一、實現的效果圖如下：

JSON數據示例：

[{"NAME":"省級名醫","CODE":"sjmy"},{"NAME":"市級名醫","CODE":"市級名醫"}]

  二、實現

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