jeefast框架：实现【二级联动查询】及【修改默认选中】功能

jeefast框架：实现【二级联动查询】及【修改默认选中】功能

这个是我的学生表

下面这个是我的班级表

年级和班级差不多

先在html中编辑联动下拉框的样式

<div class="form-group">
				<div class="col-sm-2 control-label">年级</div>
				<div class="col-sm-10">
					<select class="form-control" v-model="student.gid"  @change="getClass()" id="selected">
						<option v-for="(v,index) in grade" :value="v.gid">{{v.gname}}</option>
					</select>
				</div>
			</div>
			//v-model="student.gid"这个是我在学生实体类中定义了虚假的gid，，将选中的年级id赋给gid,便于后面取用
			//@change是当我点击选中年级时，我会自动调用getClass()方法，根据选中年级的id查询班级表中的内容
			<div class="form-group">
				<div class="col-sm-2 control-label">班级</div>
				<div class="col-sm-10">
					<select class="form-control" v-model="student.cid" >
						<option v-for="(v,index) in classes" :value="v.cid">{{v.cname}}</option>
					</select>
				</div>
			</div>

接下来就是通过js和后台的数据交互，来从前台请求数据，然后从后端返回数据给前端，再将返回的数据给HTML显示出来。

下面是js代码

$(function () {
    $("#jqGrid").jqGrid({
        url: baseURL + 'platform/student/list',
        datatype: "json",
        colModel: [			
			{ label: 'ID', name: 'id', index: "id", width: 15, key: true },
			{ label: '学生姓名', name: 'name', width: 30 },
			{ label: '班级', name: 'pf_class.cname', width: 30 },
			// { label: '年级', name: 'pf_grade.gname', width: 40 },
			{ label: '身份证号', name: 'card', width: 60 },
            { label: '类型', name: 'type', width: 30, formatter: function(value, options, row){
				return value === 0 ? 
						'<span class="label label-danger">平台通知</span>' : 
						'<span class="label label-success">业务通知</span>';
			}},
			{ label: '头像',name: 'file',width:50,formatter:function (value, options, row) {
					var img="<img src='"+value+"'style=width:120px;height:65px;"+vm.student.file+">";
					return img;
				}},
			{ label: '地址', name: 'content', width: 100 },
			{ label: '发布时间', name: 'publishTime', width: 53 },
			{ label: '创建人', name: 'createrName', width: 30 }
        ],
		viewrecords: true,
        height:500,
        rowNum: 10,
		rowList : [10,30,50],
        rownumbers: true, 
        rownumWidth: 25, 
        autowidth: true,
        multiselect: true,
        pager: "#jqGridPager",
        jsonReader : {
        	root: "page.records",
            page: "page.current",
            total: "page.pages",
            records: "page.total"
        },
        prmNames : {
            page:"page", 
            rows:"limit", 
            order: "order"
        },
        gridComplete:function(){
        	//隐藏grid底部滚动条
        	$("#jqGrid").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "hidden" }); 
        }
    });
});

var vm = new Vue({
	el:'#jeefastapp',
	data:{
		q:{
			name: '',
			gid:0,
			cid:0,
		},
		showList: true,
		title: null,
		student: {},
		classes:{},
		grade:{},
	},
	mounted() {
		this.getGrade();
	},
	methods: {
		query: function () {
			vm.reload();
		},
		add: function(){
			vm.showList = false;
			vm.title = "新增";
			vm.classes=[];
			vm.student = {};
			this.getGrade();

		},
		update: function () {
			var studentId = getSelectedRow();
			if(studentId == null){
				return ;
			}
			vm.showList = false;
            vm.title = "修改";
			vm.getstudent(studentId);
			this.getGrade();
			var classesId = vm.student.gid;//这一步就是我们将年级的主键gid的值 赋给变量classesId;
			this.getClass(classesId);//将这个变量赋值给this.getClass(classesId);来查询班级表的内容
		},
		del: function () {
			var studentIds = getSelectedRows();
			if(studentIds == null){
				return ;
			}

			confirm('确定要删除选中的记录？', function(){
				$.ajax({
					type: "POST",
				    url: baseURL + "platform/student/delete",
                    contentType: "application/json",
				    data: JSON.stringify(studentIds),
				    success: function(r){
						if(r.code == 0){
							alert('操作成功', function(){
                                vm.reload();
							});
						}else{
							alert(r.msg);
						}
					}
				});
			});
		},
		saveOrUpdate: function () {
			var url = vm.student.id == null ? "platform/student/save" : "platform/student/update";
			$.ajax({
				type: "POST",
			    url: baseURL + url,
                contentType: "application/json",
			    data: JSON.stringify(vm.student),
			    success: function(r){
				// alert(JSON.stringify(r));
			    	if(r.code == 0){
						alert('操作成功', function(){
							vm.reload();
						});
					}else{
						alert(r.msg);
					}
				}
			})
		},
		getstudent: function(studentId) {
			$.ajax({
				type: 'post',
				url: baseURL + "platform/student/info/" + studentId,
				contentType: "application/json",
				async:false,			//async:false 是同步请求数据
				success: function (result) {
					if (result.code == 0) {
						vm.student = result.student;
					}
					/*请求后台服务器，获取student表中的外键cid，将cid赋值给变量classesId，作为条件;
					查询数据库class表中的数据，获取class表中的gid，将gid赋值给data方法中的student中*/
					//这一步的作用是获取cid,和gid值，赋值给data中的student,方便之后取用
					var classesId = vm.student.cid;
					$.ajax({
						type: 'post',
						url: baseURL + "platform/class/info/" + classesId,
						contentType: "application/json",
						async: false,
						success: function (result) {
							// alert(JSON.stringify(result));
							if (result.code == 0) {
								vm.student.gid = result.classes.gid;
							}
						}
					});// alert(vm.student.cid);//通过她在查询下 请求控制器1901
				}
			});
			// alert(vm.student.gid);
		},
		/*
		* 班级表
		* */
		getClass:function(){
			// var classesId=$("#selected").val();
			var classesId=vm.student.gid;
			// alert(classesId);
			$.ajax({
				type: 'post',
				url:baseURL + "platform/class/findByIdAll/"+classesId,
				contentType: "application/json",
				async:false,
				success:function (result) {
					if(result.code==0){
						vm.classes=result.classes;
					}
				}
			});
		},
		/*
		* 年级表
		* */
		getGrade:function(){
			$.ajax({
				type: 'post',
				url:baseURL + "platform/grade/findAll/",
				contentType: "application/json",
				success:function (result) {
					if(result.code==0){
						vm.grade=result.grade;
					}
				},
			});
		},
		reload: function () {
			vm.showList = true;
			var page = $("#jqGrid").jqGrid('getGridParam','page');
			$("#jqGrid").jqGrid('setGridParam',{
                postData:{
							'name': vm.q.name,
							'cid': vm.q.cid,
						 },
                page:page
            }).trigger("reloadGrid");
		},
	},
});

后端主要代码，如下

baseURL + “platform/grade/findAll/” ：前端请求后端数据的路由，查询年级表中的内容

@RequestMapping("/findAll")
	@RequiresPermissions("platform:grade:findAll")
	public R list(){
		Map<String, Object> map=new HashMap<>();
		List<Grade> list = GradeService.selectByMap(map);
		return R.ok().put("grade", list);
	}

baseURL + “platform/class/findByIdAll/”+classesId, ：前端请求后端数据的路由，查询班级表中的内容

@RequestMapping("/findByIdAll/{classesId}")
	@RequiresPermissions("platform:class:findByIdAll")
	public R list(@PathVariable("classesId") int classesId){
		Map<String, Object> map=new HashMap<>();
		map.put("gid",classesId);
		List<Class> list = ClassService.findAll(map);
		return R.ok().put("classes", list);
	}

通过班级表中的年级外键，就可以定位到这个班级是在哪一个年级下的了。同理，就可以实现修改默认了