一个基于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;
}
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）