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三级(此处三层)联动入口，六个参数:路径，三个下拉框选择器(按顺序1,2,3级),id,字段名
function category(url, id_sel_one, id_sel_two, id_sel_there,id,value){
	var object=selec(url+"0",id,value);
	object.onSelect=function(rec){ 	//选择一级时，对象添加检测函数，进入二级操作,以此类推
		$(id_sel_there).combobox('loadData', {}); //清除第三级的所有选项
		$(id_sel_there).combobox("setText","--  请选择  --"); //设置第三级别默认提示
		
		var object_two=selec(url+rec.categid,id,value);
	    object_two.onSelect=function(rec){ 
	    	var object_there=selec(url+rec.categid, id, value);
	    	$(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;
	}	

清除状态

//下拉框改变清除之前状态
function clearsta(){
	$("#category_there").combobox("setValue","");
	$("#category_two").combobox("setValue","");
	$("#category_one").combobox("setValue","");
	$("#industry").combobox("setValue","");
	$("#industry").combobox("setText","--  选择行业  --");
	$("#category_one").combobox("setText","--  请选择  --");
	$("#category_two").combobox("setText","--  请选择  --");
	$("#category_there").combobox("setText","--  请选择  --");
}

实例: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){
	   			}