easyui三级联动

jquery

定义公用对象

//easyui三级联动公用对象
function selec(urle,id,value){
	var obj={
		    valueField: id, //数据库查询出来的id 或别名
		    textField: value, //数据库查询出来的字段 或别名
		    url:urle,			//查询路径
		    method:'get' ,		//get请求
		    editable:false,		//设置只能选择，不能自己编辑
	    };
	return obj;
}	

三级联动方法调用入口

// easyui三级(此处三层)联动入口，4个参数:路径，三个下拉框选择器(按顺序1,2,3级)
function thereLinkage(url, id_sel_one, id_sel_two, id_sel_there,id){
	var object=selec(url+"0");		// 一级父节点一般为0，若为其他自行修改
	object.onSelect=function(rec){	// 选择一级时，对象添加检测函数，进入二级操作,以此类推
		$(id_sel_there).combobox("setValue","");
		$(id_sel_there).next(".combo").hide();// 隐藏三级， .combo为固定方法，easyui自动添加
		
		var object_two=selec(url+rec.id,id_sel_two);	
	    object_two.onSelect=function(rec){ debugger
	    	$(id_sel_there).next(".combo").show(); // 显示第三级
	    	var object_there=selec(url+rec.id,id_sel_there);
	    	$(id_sel_there).combobox(object_there);
	    }
	    $(id_sel_two).combobox(object_two);
	}
	$(id_sel_one).combobox(object);
}

获取参数

//easyui三级联动获取底层值，参数:三级选择器，一，二，三级
	function getVel(sel_one,sel_two,sel_there){
		var category_two=$(sel_two).combobox('getValue');
	   	var category_id=$(sel_there).combobox('getValue');
	   	if(!category_id){
	   		category_id=category_two;
	   	}else if(!category_two){
	   		category_id=$(sel_one).combobox('getValue');
	   	}
	   	return category_id;
	}	

实例:html

<div id="postpone" title="批量修改职位类别" class="easyui-dialog"
			closed="true">
			<table id="batchmovetype" >
				<form id="industrymovetype" method="put">
					<input id="jid" name="jobId" style="display: none" />
					<tr class="selection">
						<td>行业大类：</td>
						<td>
							<!-- 字段 textField，valueField 需与查询返回结果 字段 或 别名 一致--> 
							<select id="industry" style="height: 30px; width: 170px;"
							class="easyui-combobox" name="industry" editable="false" >
							<option selected>--  选择行业  --</option>
							</select>
						</td>
					</tr>
					<tr class="selection">
						<td>职业类别：</td>
						<td><select id="category_one"
							style="height: 30px; width: 170px;"  editable="false" class="easyui-combobox"
							name="categname"><option selected>--  请选择  --</option></select></td>
					</tr>
					<tr class="selection">
						<td></td>
						<td><select id="category_two"
							style="height: 30px; width: 170px;"  editable="false" class="easyui-combobox"
							name="categname"  ><option selected>--  请选择  --</option></select></td>
					</tr>
					<tr class="selection" id="category_last">
						<td></td>							<!-- editable=false 不可编辑 -->
						<td><select id="category_there"  editable="false"
							style="height: 30px; width: 170px;" class="easyui-combobox"
							name="categname"><option selected>--  请选择  --</option></select></td>
					</tr>
				<tr class="submit">
					<td></td>
					<td><a href="javascript:void(0)"  class="easyui-linkbutton"
						iconCls="icon-ok" id="sub">确认</a> 
						<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-no"
						onclick="javascript:$('#postpone').dialog('close')">取消</a></td>
				</tr>
				</form>
			</table>
		</div>
	</div>

实例:css

#batchmovetype{
	align: center;	
	margin:10px auto;
}

input,select {
	padding-left:5px;
	outline: none;
}

.easyui-dialog {
	width: 360px;
	height: 205px;
}

.selection{
	margin: 7px 0;
	font-weight: bold;
}

#sub{
	background-color: orange;
	margin: 0 20px 0 10px;
}

实例：js事件，模拟触发

clearsta();//设置提示文字
var arr = $("#mytable").datagrid("getSelections");
if (arr.length == 0) {
	state();//下面写好的方法
} else {
	var json=selections(arr);
	$("#industry").combobox({
		valueField:'id',
		textField:'indusname',
		eaitable:true,
		url:'queryindustry',
		method:'get'
	});
	category("category/","#category_one","#category_two","#category_there",'categid','categname');//行业三级联动初始化
	$("#postpone").window("open");  //弹出窗口	
   	$("#jid").val(json.jobId);	  //id赋值到隐藏框 
}

实例:提交js

	$("#sub").click(function(){//修改职位类别
	   	var industry=$("#industry").combobox('getValue');
	   	var category_id=getVel("#category_one","#category_two","#category_there");
	   	
	   	var regex=/^\+?[1-9][0-9]*$/;
	   	if(!regex.test(industry)){
	   		industry=0;
	   	}
	   	if(!regex.test(category_id)){
	   		category_id=0;
	   	}
	   	if(!(industry || category_id)){
	   		return $.messager.alert("提示","<font color='orange' size='16px'>请选择后再提交</font>");
	   	}
	   	$.ajax({
	   		url:'updPosiType/'+$("#jid").val(),
	   		type:'put',
	   		data:{
	   			'industry':industry,
	   			'category_id':category_id
	   		},
	   		success:function(data){
	   			successdata(data);
	   		}
	   	})
   });

实例 : 未选中提示方法

// 未选中数据提示
function state() {
	$.messager.show({
		title : '提示',
		'text-align':'center',
		msg : "<font color='red' size='16px'><b>请选中要操作的行数据!!</b></font>",
		showType : 'show',
		width:'245px',
		'line-height':'120px',
		timeout : 1000,
		style : {
			align : 'center'
		}
	});
}

实例：操作结果提示

// 操作状态提示框
function successdata(data) {
	if (data.code == 0) {
		$.messager.show({
			title : '操作提示',
			msg : "<font color='#7fb80e' size='16px'>操作成功，消息将在1秒后关闭。</font>",
			timeout : 1000,
			showType : 'slide',
			width:'245px',
			height:'120px',
			style : {
				align : 'center'
			}
		});
		$("#mytable").datagrid("reload");
		$("#win").window("close");
		$("#fm").form("clear");
		$("#stickwin").window("close");
		$("#stickfm").form("clear");
		$("#postpone").window("close");
	} else {
		$.messager.show({
			title : '操作提示',
			msg : "<font color='#f26522' size='14px' >操作异常："+data.msg+"</font>",
			showType : 'show',
			timeout : 1000,
			width:'260px',
			overflow:'scroll',
			height:'160px',
			style : {
				align : 'center'
			}
		});
	}
	clearsta();
}

实例：java代码控制层，service什么都不做，直接掉Mapper接口

/*
	 * 职位分类下拉框初始化
	 */
	@ResponseBody
	@GetMapping("/category/{superId}")
	public List<Map<String ,Object>> categoryQuery(@PathVariable String superId) {
		return pms.categoryQuery(superId);
	}
	
	
	/*
	 * 修改类别
	 */
	@ResponseBody
	@PutMapping("/updPosiType/{jobId}")
	public Result updPosiType(@PathVariable String jobId, String industry,String category_id) {
		
		return pms.updPosiType(jobId.split(","), industry, category_id);
	}

实例：service

@Override
	public List<Map<String, Object>> queryindustry() {
		
		return pmm.queryindustry();
	}

	@Override
	public List<Map<String, Object>> categoryQuery(String superId) {
		
		return pmm.categoryQuery( superId);
	}

	@Override
	public Result updPosiType(String[] arr, String industry, String category_id) {
		
		Result result=new Result();
		try {
			pmm.updPosiType(arr,industry,category_id);
		} catch (Exception e) {
			e.printStackTrace();
			result.setCode(1);
			result.setMsg("修改失败"+e.getMessage());
		}
		return result;
	}

实例：java代码Mapper接口

@Select("select id_industry AS id,industry_name AS indusname from tb_classify_industry order by id_industry")
	public List<Map<String, Object>> queryindustry();
	
	
	@Select("select id_position AS categid,position_name AS categname from tb_classify_position where superclass_number=ifnull(#{superId},0) order by id_position")
	public List<Map<String, Object>> categoryQuery(@Param("superId") String superId);

	
	public void updPosiType(@Param("arr") String[] arr,@Param("industry") String industry,@Param("category_id") String category_id);

接口继承mybatisPlus框架的 BaseMapper接口

实例：java mybatisPlus xml文件

<update id="updPosiType">
	update tb_job_manage 
	<set>
		<if test="industry!=null and industry!=0">
			vocation=#{industry},
		</if>
		<if test="category_id!=null and category_id!=0">
			jobType=#{category_id},
		</if>
	</set>
	where jobId in 
	<foreach item="item" collection="arr"  open="(" close=")"  separator=",">  
		#{item}
	</foreach>
</update>

效果图 行业大类独立，职位类别下为三级联动

选择一级后效果如下

二级不选效果如下，三级无值，建议设置改变一级时隐藏三级，此处未设置

注！！！