EasyUI的commbox下拉级联+搜索+下拉多选功能

2024-04-20 用户投稿学习笔记 12阅读

前言

一个基于easyui的3级下拉级联+搜索功能+下拉多选功能于一身。并且官网的搜索功能有个bug就是搜索的内容无法清空，由于是多选功能，所以我目前还未实现，选中一个或者多个以后还有用搜索功能，如果有读者有能搞定的可以私聊我。主要功能有：

下拉级联搜索功能下拉多选功能清空下级逻辑判断代码 <#--html代码--><td colspan="4"><label style="width: 80px;">缺陷问题:   </label> <input type="hidden" id="problemCheck" value="${(info.problem)!''}"> <input class="easyui-combobox" style="width:28%;" name="problem" id="problem" value="${(info.problem)!''}"> <label style="width: 80px;">缺陷原因：  </label> <input type="hidden" id="reasonsCheck" value="${(info.reasons)!''}"> <input class="easyui-combobox" style="width:28%;" name="reasons" id="reasons" value="${(info.reasons)!''}"> <label style="width: 80px;">处理方法：   </label><input class="easyui-combobox" style="width:28%;" name="method" id="method" value="${(info.method)!''}"></td> <#--js代码-->$(function() { // 下拉框选择控件，下拉框的内容是动态查询数据库字典表信息，后端启动了缓存 $('#problem').combobox({ url:'${ctx}/equip/maintenance/defectOrder/listDictNoRoot/PROBLEM', method:'get', valueField: 'code', textField: 'nameStandby1', editable:true, //false不可编辑状态 cache: false, panelHeight: '150', hasDownArrow:true, multiple:true, filter: function(q, row){ var opts = $(this).combobox('options'); //==0表示前缀批评为，>-1表示全局搜索匹配 return row[opts.textField].indexOf(q) > -1; }, onLoadSuccess: function (data) { var ids = $('#problem').combobox('getValues'); if(ids !=null && ids !='' && ids !=undefined){ $.ajax({ type: "get", url:'${ctx}/equip/maintenance/defectOrder/listDictNoRoot/REASONS', data:{"pids":ids.join(",")}, cache: false, dataType : "json", success: function(data){ $("#reasons").combobox("loadData",data); } }); } }, onHidePanel: function(){ var ids = $('#problem').combobox('getValues'); var allData = $(this).combobox("getData"); //获取combobox所有数据 var len1=ids.length; var len2=allData.length; $('#problem').combobox('clear');//清空选中项 var newVal=[]; for(var j=0;j<len1;j++){ var val=ids[j]; for (var i = 0; i < len2; i++) { if (val == allData[i].code) { newVal.push(val); } } } $('#problem').combobox('setValues',newVal); ids = $('#problem').combobox('getValues'); var problemCheck = $('#problemCheck').val(); //逻辑判断2个数组是否相等，是否需要清空；相等即说明选中的结果没有变化就不用清空 var flag=isArrayEqual(problemCheck.split(","),newVal); if (!flag) { // 缺陷原因： $('#reasons').combobox('clear');//清空选中项 $('#reasons').combobox('loadData', {});//清空option选项 // 处理方法： $('#method').combobox('clear');//清空选中项 $('#method').combobox('loadData', {});//清空option选项 //赋值。作为判断用 $('#problemCheck').val(newVal.join(",")); } if(ids !=null && ids !='' && ids !=undefined){ $.ajax({ type: "get", url:'${ctx}/equip/maintenance/defectOrder/listDictNoRoot/REASONS', data:{"pids":ids.join(",")}, cache: false, dataType : "json", success: function(data){ $("#reasons").combobox("loadData",data); } }); } }, icons: [{ iconCls:'iconfont icon-guanbi3', handler: function(e){ $(e.data.target).combobox('clear'); // 缺陷原因： $('#reasons').combobox('clear');//清空选中项 $('#reasons').combobox('loadData', {});//清空option选项 // 处理方法： $('#method').combobox('clear');//清空选中项 $('#method').combobox('loadData', {});//清空option选项 } }] }); $('#reasons').combobox({ editable:true, //false不可编辑状态 cache: false, panelHeight: '150',//自动高度适合 valueField:'code', textField:'nameStandby1', hasDownArrow:true, multiple:true, filter: function(q, row){ var opts = $(this).combobox('options'); return row[opts.textField].indexOf(q) > -1; }, onLoadSuccess: function (data) { var ids = $('#reasons').combobox('getValues'); if(ids !=null && ids !='' && ids !=undefined){ $.ajax({ type: "get", url:'${ctx}/equip/maintenance/defectOrder/listDictNoRoot/METHOD', data:{"pids":ids.join(",")}, cache: false, dataType : "json", success: function(data){ $("#method").combobox("loadData",data); } }); } }, onHidePanel: function(){ var ids = $('#reasons').combobox('getValues'); var allData = $(this).combobox("getData"); //获取combobox所有数据 var len1=ids.length; var len2=allData.length; $('#reasons').combobox('clear');//清空选中项 var newVal=[]; for(var j=0;j<len1;j++){ var val=ids[j]; for (var i = 0; i < len2; i++) { if (val == allData[i].code) { newVal.push(val); } } } $('#reasons').combobox('setValues',newVal); ids = $('#reasons').combobox('getValues'); var reasonsCheck = $('#reasonsCheck').val(); //逻辑判断2个数组是否相等，是否需要清空；相等即说明选中的结果没有变化就不用清空 var flag=isArrayEqual(reasonsCheck.split(","),newVal); if (!flag) { // 处理方法： $('#method').combobox('clear');//清空选中项 $('#method').combobox('loadData', {});//清空option选项 //赋值。作为判断用 $('#reasonsCheck').val(newVal.join(",")); } if(ids !=null && ids !='' && ids !=undefined){ $.ajax({ type: "get", url:'${ctx}/equip/maintenance/defectOrder/listDictNoRoot/METHOD', data:{"pids":ids.join(",")}, cache: false, dataType : "json", success: function(data){ $("#method").combobox("loadData",data); } }); } }, icons: [{ iconCls:'iconfont icon-guanbi3', handler: function(e){ $(e.data.target).combobox('clear'); // 处理方法： $('#method').combobox('clear');//清空选中项 $('#method').combobox('loadData', {});//清空option选项 } }] }); $('#method').combobox({ editable:true, //false不可编辑状态 cache: false, panelHeight: '150',//自动高度适合 valueField:'code', textField:'nameStandby1', multiple:true, filter: function(q, row){ var opts = $(this).combobox('options'); return row[opts.textField].indexOf(q) > -1; }, onHidePanel: function(){ var ids = $('#method').combobox('getValues'); var allData = $(this).combobox("getData"); //获取combobox所有数据 var len1=ids.length; var len2=allData.length; $('#method').combobox('clear');//清空选中项 var newVal=[]; for(var j=0;j<len1;j++){ var val=ids[j]; for (var i = 0; i < len2; i++) { if (val == allData[i].code) { newVal.push(val); } } } $('#method').combobox('setValues',newVal); }, icons: [{ iconCls:'iconfont icon-guanbi3', handler: function(e){ $(e.data.target).combobox('clear'); } }] });});/* 判断2个数组是否相等（不限顺序） */function isArrayEqual (arr1, arr2) { var a1 = arr1.map((i) => i); var a2 = arr2.map((i) => i); var tempArr = []; if (a1.length !== a2.length) { return false } else { for (var i = 0; i < a1.length; i++) { if (a2.indexOf(a1[i]) !== -1) { a2.splice(a2.indexOf(a1[i]), 1); tempArr.push(a1[i]); } else { tempArr = []; break; } } return tempArr.length === arr2.length; }} 后端代码

业务代码不同的需求处理方式不一样。没有太多参考价值。

1.控制层

/** * 加载缺陷问题、缺陷原因、缺陷处理方法 * @param typekey 字典类型 * @param standby2 父级下拉选中的所有父id用“,”隔开，第一级缺陷问题为空 * @return */@ResponseBody@RequestMapping("/listDictNoRoot/{typekey}")public List<Dict> listDictNoRoot(@PathVariable String typekey, @RequestParam(value = "pids",required = false) String standby2) {//1.查询字典数据，基于字典类型查询存储与redis中。List<Dict> dictList = dictService.listDictNoRoot(typekey);//2.处理结果数据并且返回结果return defectOrderService.listDictDealWith(dictList,standby2);}

2.业务层

/** * 处理缺陷问题、缺陷原因、缺陷处理方法 * @param dictList 查询的缺陷问题、缺陷原因、缺陷处理方法 * @param standby2s 父级下拉选中的所有父id用“,”隔开过滤结果 * @return */ public List<Dict> listDictDealWith(List<Dict> dictList, String standby2s) { //1.判断查询字典结果是否为空 if (ObjKit.isEmpty(dictList)) { return Collections.emptyList(); } //2.定义一个新的集合来接收最后的结果 List<Dict> newDictList=new ArrayList<>(dictList.size()); //3.判断是否父id是否为空 if (ObjKit.isEmpty(standby2s)) { //为空，则说明是第一级下拉选项，即缺陷问题下拉渲染 //3.1业务需求需要把字典中的那个值都显示出来组成下拉选项的text值 for (Dict dict : dictList) { dict.setExt(Collections.singletonMap("nameStandby1",dict.getStandby1()+dict.getName())); newDictList.add(dict); } }else { //不为空，则表示是缺陷原因和缺陷处理方法的下拉渲染 //3.1，根据副id来过滤掉查询的结果 List<String> standby2List = Arrays.asList(standby2s.split(",")); newDictList= dictList.stream() .filter(e -> standby2List.contains(e.getStandby2())) .collect(Collectors.toList()); //3.2业务需求需要把字典中的那个值都显示出来组成下拉选项的text值 newDictList.stream().forEach(dict->dict.setExt(Collections.singletonMap("nameStandby1",dict.getStandby1()+dict.getName()))); } //4.返回结果 return newDictList; }

标签：