基于若依框架,实现三级联动和修改默认
添加
<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";
}