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

转载自:   https://blog.csdn.net/u012027337/article/details/53927376  

一、实现的效果图如下:

关于easyui combobox下拉框实现多选框的实现_第1张图片

   二、实现

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

  1. 学术荣誉:
  2.     
  3.           
  4.     


  2、js部分初始化学术荣誉下拉框数据
      需要给大家说明一下的是,我上面展示的效果图里面加载的数据来自我自己这边的数据库字典,即来自数据库,那么就需要从后台获取数据了,下面会做详细介绍,

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

满足一下大家的好奇心

  1. $(function(){
  2.  
  3.  //初始化多选复选框
  4.  initCombobox('xsry','XSRY_CD');//学术荣誉的字典编码是XSRY_CD
  5. )
  6. //参数:id  控件id   code 字典编码
  7. function initCombobox(id,code){
  8.             var value = "";
  9.             //加载下拉框复选框
  10.             $('#'+id).combobox({
  11.                 url:'${base}/ht/getComboboxData.action?dictionaryCode='+code, //后台获取下拉框数据的url
  12.                 method:'post',
  13.                 panelHeight:200,//设置为固定高度,combobox出现竖直滚动条
  14.                 valueField:'CODE',
  15.                 textField:'NAME',
  16.                 multiple:true,
  17.                 formatter: function (row) { //formatter方法就是实现了在每个下拉选项前面增加checkbox框的方法
  18.                     var opts = $(this).combobox('options');
  19.                     return '' + row[opts.textField]
  20.                 },
  21.                 onLoadSuccess: function () {  //下拉框数据加载成功调用
  22.                     var opts = $(this).combobox('options');
  23.                     var target = this;
  24.                     var values = $(target).combobox('getValues');//获取选中的值的values
  25.                     $.map(values, function (value) {
  26.                         var el = opts.finder.getEl(target, value);
  27.                         el.find('input.combobox-checkbox')._propAttr('checked', true); 
  28.                     })
  29.                 },
  30.                 onSelect: function (row) { //选中一个选项时调用
  31.                     var opts = $(this).combobox('options');
  32.                     //获取选中的值的values
  33.                     $("#"+id).val($(this).combobox('getValues'));
  34.                    
  35.                    //设置选中值所对应的复选框为选中状态
  36.                     var el = opts.finder.getEl(this, row[opts.valueField]);
  37.                     el.find('input.combobox-checkbox')._propAttr('checked', true);
  38.                 },
  39.                 onUnselect: function (row) {//不选中一个选项时调用
  40.                     var opts = $(this).combobox('options');
  41.                     //获取选中的值的values
  42.                     $("#"+id).val($(this).combobox('getValues'));
  43.                   
  44.                     var el = opts.finder.getEl(this, row[opts.valueField]);
  45.                     el.find('input.combobox-checkbox')._propAttr('checked', false);
  46.                 }
  47.             });
  48.         }


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

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

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

  Controller层:

  1. @RequestMapping(value = "/getComboboxData")
  2.     @ResponseBody
  3.     public String getComboboxData(HttpServletRequest request,String dictionaryCode) {
  4.         
  5.         String data ;
  6.         JSONObject json = new JSONObject();
  7.         JSONArray array = new JSONArray();
  8.         try{
  9.             List resultList = tPersonService.getComboboxData(dictionaryCode);
  10.             if(!resultList.isEmpty()){
  11.                 for(Map lb : resultList){
  12.                     json.put("CODE", lb.get("CODE"));
  13.                     json.put("NAME", lb.get("NAME"));            
  14.                     array.add(json);
  15.                 }
  16.             }
  17.             data =  array.toString();
  18.         } catch (Exception e) {
  19.             data = "{}" ;
  20.         }
  21.         return data;
  22.     }
  23.  

 

Service 层:

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

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

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

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

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

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

你可能感兴趣的:(杂谈)