Spring Boot Jeefast等java框架实现多级联动以及回显规功能

在实际的项目中多级联动和回显功能是最长用的功能之一，比如在录入家庭住址，学校录入学生成绩的时候就会用到，那么怎么做呢？？？

联动的原理实际上就是sql语句的条件查询，根据不同对象的相同属性来选择出符合条件的对象
回显实际上就是反联动
我们以年级 => 班级 => 学生的三级联动为案例
首先进行建表：



我们依次建好三个表，字段根据自己需要添加或删除

同时在写好HTML

<select v-model="gid" class="form-control" @change="lnj(gid)">
	<option value="0">请选择年级</option>
	<option v-for="n in njall" :value="n.gid">{{n.gname}}</option>
</select>
<select v-model="ccid" class="form-control" @change="lclass(ccid)">
	<option value="0">请选择班级</option>
	<option v-for="c in claall" :value="c.cid">{{c.cname}}</option>
</select>
<select v-model="ssid" class="form-control">
	<option value="0">请选择学生</option>
	<option v-for="s in stuall" :value="s.sid">{{s.sname}}</option>
</select>

在这里首先年级是需要自动查询出全部的，所以需要写好方法在进入添加或修改的时候自动调用，
JS:

qnjall: function(){
			$.get(baseURL + "stu/nj/all", function(r){
				vm.njall = r.all;
			});
		},

控制器：

/**
	 * 查询全部
	 */
	@RequestMapping("/all")
	@RequiresPermissions("stu:nj:all")
	public R all(){
		List<StuNj> list=stuNjService.selectList(new EntityWrapper<StuNj>());
		return R.ok().put("all", list);
	}

在选完年级后根据年级的ID来进行找相应的班级
JS:

lnj:function(gid){
			$.get(baseURL + "stu/class/lian/"+gid, function(r3){
				vm.ccid=0;
				vm.claall = r3.lian;
				vm.ccid=vm.student.ccid;
				//vm.claall.ccid=vm.ccid;
			});
		},

控制器：

/**
	 * 联动查询全部
	 */
	@RequestMapping("/lian/{gid}")
	@RequiresPermissions("stu:class:lian")
	public R lian(@PathVariable("gid") Long gid){
		//查询列表数据
		List<StuClass> lian = stuClassService.selectList(new EntityWrapper<StuClass>().eq("gid", gid));		
		return R.ok().put("lian", lian);
	}

然后就是根据班级找学生了，

JS:

lclass:function(ccid){
			$.get(baseURL + "stu/student/lian/"+ccid, function(r4){
				vm.ssid=0;
				vm.stuall = r4.lian;
				vm.ssid=vm.notice.ssid;
			    // alert(JSON.stringify(r));
				//vm.notice.ssid=vm.ssid;
			});
		},

控制器：

/**
	 * 联动查询全部
	 */
	@RequestMapping("/lian/{ccid}")
	@RequiresPermissions("stu:student:lian")
	public R lian(@PathVariable("ccid") Long ccid){
		//查询列表数据
		List<StuStudent> lian = studentService.selectList(new EntityWrapper<StuStudent>().eq("ccid", ccid));
		return R.ok().put("lian", lian);
	}

到这里三级联动就好了，接下来就是回显的问题了
回显就是反联动 ；联动是 年级 =》 班级 =》 学生
回显：学生=》班级=》年级=》班级 =》 学生，
代码如下

getNotice: function(noticeId){
			$.get(baseURL + "stu/result/info/"+noticeId, function(r){
				vm.notice = r.notice;
				vm.time=vm.notice.retime;
				$("#date").val(vm.time);
			 //alert(JSON.stringify(r));
				$.get(baseURL + "stu/student/info/"+r.notice.ssid, function(s){
					//alert(JSON.stringify(r1.student));
					vm.student=s.student;
					// alert(vm.ccid);
					$.get(baseURL + "stu/class/info/"+s.student.ccid, function(c){
					   // alert(JSON.stringify(r2.notice));
						vm.gid=c.notice.gid;
						vm.lnj(c.notice.gid);
						vm.lclass(s.student.ccid);
					})
				})
			});
		},

这样一个三级联动以及回显就完成了！

这样就好了