博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
关于easyui combobox下拉框实现多选框的实现
阅读量:5217 次
发布时间:2019-06-14

本文共 5265 字,大约阅读时间需要 17 分钟。

好长时间没有更博了,一是因为最近真的比较忙,二是因为自己是真的偷懒了,哈哈

     好啦,这篇博客主要是总结一些关于easyui combobox下拉框实现多选框的实现,包括前台界面的展示,和后台对数据的获取应用

一、实现的效果图如下:

JSON数据示例:

[{"NAME":"省级名医","CODE":"sjmy"},{"NAME":"市级名医","CODE":"市级名医"}]

  二、实现

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

学术荣誉:                                    

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 '' + 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 resultList = tPersonService.getComboboxData(dictionaryCode);                  if(!resultList.isEmpty()){                      for(Map
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 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 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 + " ) " ;                                         }

 

转载于:https://www.cnblogs.com/shuilangyizu/p/9141282.html

你可能感兴趣的文章
[洛谷1485] 火枪打怪
查看>>
PAT B1018.锤子剪刀布(20)
查看>>
Extjs控件之 grid打印功能
查看>>
枚举类型(不常用)递归
查看>>
ETL
查看>>
Tomcat源码分析(六)--日志记录器和国际化
查看>>
YII缓存依赖的应用
查看>>
决策树在机器学习的理论学习与实践
查看>>
Biee 11g权限详解
查看>>
minggw 安装
查看>>
Jquery操作cookie,实现简单的记住用户名的操作
查看>>
[BZOJ1196][HNOI2006]公路修建问题 二分答案+最小生成树
查看>>
PHP基础入门(二)
查看>>
[Luogu P3119] [USACO15JAN]草鉴定Grass Cownoisseur (缩点+图上DP)
查看>>
【原创】大数据基础之Zookeeper(4)应用场景
查看>>
18款在线代码片段测试工具
查看>>
20.C++- &&,||逻辑重载操作符的缺陷、,逗号重载操作符的分析
查看>>
静态变量数组实现LRU算法
查看>>
在SQL中怎么把一列字符串拆分为多列
查看>>
中文系统 上传file的input显示英文
查看>>