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

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

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下拉框实现多选框以及全选、全不选的实现

猜你喜欢