easyui combobox 3个下拉框级联新增显示，修改回显

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/lyz602986140/article/details/102578995

前言

在实际项目中，有这么一个需求，3个下拉框选项是属于级联级别的，新增时：当选中第1个下拉框的值时，第二个下拉框根据第一下拉框中的类型查询数据，当第二个下拉框选中值时查询第三个下拉框的值并回显，修改时：回显选中第一个下拉框值，然后查询第二个下拉框并回显，然后查询第三个下拉框并回显

实现

1.新增和修改使用同一个函数

function dangerAllTypeLoad(params){
	//稽核單位類型
	$('#fm_checkDepId').combobox({
		url:ctx + "/danger/getDangerCheck",
		queryParams:{"queryColumn":["id","checkName"],"ord":["id asc"]},
		valueField:'id',  
	    textField:'text' ,
	    panelHeight:'auto',
		editable:false,
		required : true,
		onSelect:function(v){
			//父類型
			$("#fm_parentTypeId").combobox({
				url:ctx + "/dangerType/getDangerType", 
				queryParams:{"queryColumn":["id","typeName"],"key":["checkTypeId","status"],"value":[v.id,"1"],"ord":["typeCode asc"],"sql":" and parentTypeId is null "},
				valueField: 'id',    
			    textField: 'text', 
				editable:false,
				required : true,
				panelHeight:'auto',
				onSelect:function(v1){
					//子類型
					$("#fm_typeId").combobox({
						url:ctx + "/dangerType/getDangerType",
						queryParams:{"queryColumn":["id","typeName"],"key":["checkTypeId","parentTypeId","status"],"value":[v.id,v1.id,"1"],"ord":["typeCode asc"]},
						valueField: 'id',    
					    textField: 'text', 
						editable:false,
						required : true,
						panelHeight:'auto',
					    onLoadSuccess: function (){
				            if (params!=null&&params.typeId!=null) {
				                $("#fm_typeId").combobox('select',params.typeId);
				                params = {};
				            }
				        }
					});
				},
			    onLoadSuccess: function (){ 
		            if (params!=null&&params.parentTypeId!=null) {
		                $("#fm_parentTypeId").combobox('select',params.parentTypeId);
		            }
		        }
			});
	    },
	    onLoadSuccess: function (){ 
    		 if (params!=null&&params.checkDepId!=null) {
                 $("#fm_checkDepId").combobox('select',params.checkDepId);
             }
        }
	});
}

其中函数的参数params是用来修改时赋值的，如果只是添加则不用使用combobox中的onLoadSuccess

2.修改时的参数params

var typeParams = {};
typeParams.checkDepId = data.rows[0].checkDepId;
typeParams.parentTypeId = data.rows[0].parentTypeId;
typeParams.typeId = data.rows[0].typeId;
dangerAllTypeLoad(typeParams);

3.添加时的参数params

dangerAllTypeLoad(null);
//清空二级或者三级内容,防止先点击修改接着点击新增后二级和三级有值
$("#fm_parentTypeId").combobox("loadData",[]);
$("#fm_typeId").combobox("loadData",[]);

感谢 https://blog.csdn.net/qq_36698956/article/details/98957360