Spring Boot Jeefast等java框架實現多級聯動以及回顯規功能

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);
					})
				})
			});
		},

這樣一個三級聯動以及回顯就完成了！

這樣就好了