jquery
定义公用对象
function selec(urle,id,value){
var obj={
valueField: id,
textField: value,
url:urle,
method:'get' ,
editable:false,
};
return obj;
}
三级联动方法调用入口
function thereLinkage(url, id_sel_one, id_sel_two, id_sel_there,id){
var object=selec(url+"0");
object.onSelect=function(rec){
$(id_sel_there).combobox("setValue","");
$(id_sel_there).next(".combo").hide();
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);
}
获取参数
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>
<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>
<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);
}
实例:提交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("提示","请选择后再提交");
}
$.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 : "请选中要操作的行数据!!",
showType : 'show',
width:'245px',
'line-height':'120px',
timeout : 1000,
style : {
align : 'center'
}
});
}
实例:操作结果提示
function successdata(data) {
if (data.code == 0) {
$.messager.show({
title : '操作提示',
msg : "操作成功,消息将在1秒后关闭。",
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 : "操作异常:"+data.msg+"",
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接口
![easyui三级联动_第1张图片](http://img.e-com-net.com/image/info8/89b9aa36a564471fbfe9f521f9a4a2bd.jpg)
实例: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>
效果图 行业大类独立,职位类别下为三级联动
![easyui三级联动_第2张图片](http://img.e-com-net.com/image/info8/b1b5b98981194875a8dcab9642713679.jpg)
选择一级后效果如下
![easyui三级联动_第3张图片](http://img.e-com-net.com/image/info8/3e349f5782d84609b6dd0a57bee1900c.jpg)
二级不选效果如下,三级无值,建议设置改变一级时隐藏三级,此处未设置
![easyui三级联动_第4张图片](http://img.e-com-net.com/image/info8/27b24b8921794754bfc5a23a7c5afa80.jpg)
注!!!
![easyui三级联动_第5张图片](http://img.e-com-net.com/image/info8/004a22c0d27346c4a7b7cecc8387f3ab.jpg)