基于若依框架，实现三级联动和修改默认

最新推荐文章于 2024-05-12 19:31:21 发布

平平常常一般牛

最新推荐文章于 2024-05-12 19:31:21 发布

阅读量1.4k

点赞数 2

分类专栏： Ruoyi 文章标签：前端

折扇戏美人

本文链接：https://blog.csdn.net/CSDN_java1005/article/details/110370436

版权

Ruoyi 专栏收录该内容

6 篇文章 10 订阅

订阅专栏

基于若依框架，实现三级联动和修改默认

在这里插入图片描述

添加

<div class="form-group">
				<label class="col-xs-3 control-label">学生校区：</label>
				<div class="col-xs-3">
					<select id="school" name="schoolSid" class="form-control select2-multiple">
						<option value=""  style="display: none">请选择校区</option>
					</select>
				</div>
			</div>
			<div class="form-group">
				<label class="col-xs-3 control-label">学生年级：</label>
				<div class="col-xs-3">
					<select id="grade" name="gradeGid" class="form-control select2-multiple">
						<option value=""  style="display: none">请选择年级</option>
					</select>
				</div>
			</div>
			<div class="form-group">
				<label class="col-xs-3 control-label is-required" >学生班级：</label>
				<div class="col-xs-3">
					<select id="classes" name="classCid" class="form-control select2-multiple">
						<option value="" style="display: none">请选择班级</option>
					</select>
				</div>
			</div>

$(document).ready(function() {//页面加载时运行此函数  放在最前端
			$.ajax({
				url: ctx + "system/school/select",
				type: 'GET',
				success: function (data) {
					/*移除所选元素的所有内容*/
					$("#school").empty();
					/*在所选元素中追加默认下拉框，防止没有默认选中元素*/
					$("#school").append("<option value=''>请选择校区</option>");
					/*通过for循环，将校区表中的内容追加到所选元素中*/
					for (var i = 0; i < data.length; i++) {
						$("#school").append("<option value='" + data[i].schoolId + "'>" + data[i].schoolName + "</option>");
					}
				}
			});
			/*当所选元素中的内容发生改变时，就运行以下内容*/
			$("#school").change(function () {
				$.ajax({
					url: ctx + "system/grade/select",
					type: 'GET',
					data: {
						/*获取所选元素中的内容，将其传输到后端服务器*/
						schoolSid: $("#school").val(),
					},
					success: function (data) {
						$("#grade").empty();
						$("#grade").append("<option value=''>请选择年级</option>");
						for (var i = 0; i < data.length; i++) {
							$("#grade").append("<option value='" + data[i].gradeId + "'>" + data[i].gradeName + "</option>");
						}
					}
				})
			})
		})
			$("#grade").change(function () {//同上面一样
				$.ajax({
					url: ctx + "system/class/select",
					type: 'GET',
					data: {
						gradeGid: $("#grade").val(),
					},
					success:function (data) {
						$("#classes").empty();
						$("#classes").append("<option value=''>请选择班级</option>");
						for (var i = 0; i < data.length; i++){
							$("#classes").append("<option value='" + data[i].classId + "'>" + data[i].className + "</option>");
						}
					}
				})
			});

GradeMapper.xml

根据获取的校区外键，查询年级表中的内容

<select id="selectSysGradeBySchoolSid" parameterType="Integer" resultMap="SysGradeResult">
        <include refid="selectSysGradeVo"/>
        where school_sid=#{schoolSid}
    </select>

schoolController

查询校区表中的数据

在这里插入图片描述

@RequestMapping("/select")
    @ResponseBody
    public List<SysSchool> select(){
        List<SysSchool>list=sysSchoolService.selectSysSchoolList(new SysSchool());
        return list;
    }

gradeController

在这里插入图片描述

@RequestMapping("/select")
    @ResponseBody
    public List<SysGrade> select(String schoolSid){
        List<SysGrade>list=sysGradeService.selectSysGradeBySchoolSid(Integer.parseInt(schoolSid));
        return list;
    }

班级同上，我就不在赘述了

修改默认

<div class="form-group">
                <label class="col-xs-2 control-label">学生校区：</label>
                <div class="col-xs-2">
                    <select id="school" class="form-control select2-multiple">
                        <option value="">请选择校区</option>
                        <option th:each="school:${school}" th:value="${school.schoolId}" th:text="${school.schoolName}" ></option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-xs-2 control-label">学生年级：</label>
                <div class="col-xs-2">
                    <select id="grade"  class="form-control select2-multiple"  >
                        <option value="">请选择年级</option>
                        <option th:each="grade:${grade}" th:value="${grade.gradeId}" th:text="${grade.gradeName}" ></option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-xs-2 control-label is-required">学生班级：</label>
                <div class="col-xs-2">
                    <select id="classes" name="classCid" class="form-control select2-multiple">
                        <option value="">请选择班级</option>
                        <option th:each="classes:${classes}" th:value="${classes.classId}" th:text="${classes.className}" th:field="*{classCid}"></option>

                    </select>
                </div>
            </div>

$(document).ready(function() {//页面加载时运行此函数  放在最前端
            /*接收后端映射过来的数据，赋值给变量*/
            var schoolId = [[${schoolSid}]];
            var gradeId = [[${gradeGid}]];
            /*将所选的变量值赋值给所选元素，作用是默认选中值*/
            $("#school").val(schoolId);
            $("#grade").val(gradeId);

            $("#school").change(function () {
                $.ajax({
                    url: ctx + "system/grade/select",
                    type: 'GET',
                    data: {
                        schoolSid: $("#school").val(),
                    },
                    success:function (data) {
                        /*移除所选元素的所有内容*/
                        $("#grade").empty();
                        $("#grade").append("<option value=''>请选择年级</option>");
                        for (var i = 0; i < data.length; i++){
                            $("#grade").append("<option value='" + data[i].gradeId + "'>" + data[i].gradeName + "</option>");
                        }
                    }
                });
            })
            $("#grade").change(function () {//同上面一样
                $.ajax({
                    url: ctx + "system/class/select",
                    type: 'GET',
                    data: {
                        gradeGid: $("#grade").val(),
                    },
                    success:function (data) {
                        $("#classes").empty();
                        $("#classes").append("<option value=''>请选择班级</option>");
                        for (var i = 0; i < data.length; i++){
                            $("#classes").append("<option value='" + data[i].classId + "'>" + data[i].className + "</option>");
                        }
                    }
                })
            });
        })

StudentController

我们先通过学生表，将班级外键的值取出来，然后在根据我们取出的班级外键值，作为班级主键，查询年级表中的内容，再将年级外键值取出来，查询校区表中的数据。

  @GetMapping("/edit/{studentId}")
    public String edit(@PathVariable("studentId") Long studentId, ModelMap mmap)
    {

        /*查询校区内容*/
        mmap.put("school",schoolService.selectSysSchoolList(new SysSchool()));
        mmap.put("student", studentService.selectStudentById(studentId));
        /*将学生表中的班级外键值取出，这样我们就获取了班级表的主键值了，
        原因是学生表的班级外键值和班级表的主键值是一致的，我们在通过学生表的班级外键值来查询班级表，同理年级的主键值也是如此获取的*/

		/*这一步的主要作用是：我们获取班级/年级/校区的主键值，用于默认下拉框*/
        String classCid=studentService.selectStudentById(studentId).getClassCid();
        String gradeGid=classService.selectSysClassById(Integer.parseInt(classCid)).getGradeGid();
        String schoolSid=gradeService.selectSysGradeById(Integer.parseInt(gradeGid)).getSchoolSid();
        /*将我们获取的外键值映射到前端界面，实现下拉框的默认实现*/
        mmap.put("classCid",classCid);
        mmap.put("gradeGid",gradeGid);
        mmap.put("schoolSid",schoolSid);
        /*根据我们前面获取的年级外键/校区外键 查询班级表/年级表中的内容*/
        mmap.put("classes",classService.selectSysClassByGradeGid(Integer.parseInt(gradeGid)));
        mmap.put("grade",gradeService.selectSysGradeBySchoolSid(Integer.parseInt(schoolSid)));

        return prefix + "/edit";
    }

平平常常一般牛

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
2
评论
基于若依框架，实现三级联动和修改默认

基于若依框架，实现三级联动和修改默认添加<div class="form-group"> <label class="col-xs-3 control-label">学生校区：</label> <div class="col-xs-3"> <select id="school" name="schoolSid" class="form-control select2-multiple"> <opti
复制链接

扫一扫