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