若依框架——＞三級聯動 新增，預設修改

小孩要吃糖發表於2020-12-01
框架

add.html

<div class="row">
			<label class="col-xs-2 control-label">學校:</label>
			<div class="col-xs-4">
				<select id="aschool" >
					<option value="">請選擇學校</option>
				</select>
			</div>
		</div>
		<div class="row">
			<label class="col-xs-2 control-label">年級:</label>
			<div class="col-xs-4">
				<select id="agrade" >
					<option value="">請選擇年級</option>
				</select>
			</div>
		</div>
		<div class= " row" >
			<label class="col-xs-2 control-label">班級:</label>
			<div class="col-xs-4">
				<select class="form-control" id="aclasses" name="cid">
					<option value="">請選擇班級</option>
				</select>
			</div>
		</div>

js

$(document).ready(function() {   //頁面載入時執行此函式  放在最前端
		/* 三級聯動 */
		$.ajax({
			url: ctx + "system/school/select",
			type: 'GET',
			success:function (data) {
				<!--清空下拉框中的快取-->
				$("#aschool").empty();
				<!--避免下拉框的值不變-->
				$("#aschool").append("<option value=''>請選擇學校</option>");
				<!--使用迴圈解析後端傳來的資料，並用使用js動態拼接html語言-->
				for (var i = 0; i < data.length; i++){
					$("#aschool").append("<option value='" + data[i].scid + "'>" + data[i].sname + "</option>");
				}
			}
		});
		$("#aschool").change(function () {//同上面一樣
			// alert($("#aschool").val())
			$.ajax({
				url: ctx + "system/grade/select",
				type: 'GET',
				data: {
					scid: $("#aschool").val(),
				},
				success:function (data) {
					$("#agrade").empty();
					$("#agrade").append("<option value=''>請選擇年級</option>");
					for (var i = 0; i < data.length; i++){
						$("#agrade").append("<option value='" + data[i].gid + "'>" + data[i].gname + "</option>");
					}
				}
			});
		});
	$("#agrade").change(function () {//同上面一樣
			// alert($("#agrade").val())
			$.ajax({
				url: ctx + "system/classes/select",
				type: 'GET',
				data: {
					gid: $("#agrade").val(),
				},
				success:function (data) {
					$("#aclasses").empty();
					$("#aclasses").append("<option value=''>請選擇班級</option>");
					for (var i = 0; i < data.length; i++){
						$("#aclasses").append("<option value='" + data[i].cid + "'>" + data[i].cname + "</option>");
					}
				}
			})
		});
	});

Service層

GradelService

 /* 三級聯動 */
public List<GXGrade> selectGradeBid1(Integer scid);

ClassesService

//聯動
public List<GXClasses> selectClassBid1(Integer gid);

Controller層

SchoolController 最高層

	/* 三級聯動 */
    @GetMapping("/select")
    @ResponseBody
    public List<GXSchool> select(){
        List<GXSchool> list1 = aschoolService.selectSchoolList(new GXSchool());
        return  list1;
    }

GradeController

/* 三級聯動 */
@GetMapping("/select")
@ResponseBody
public List<GXGrade> select(Integer scid){
    List<GXGrade> list1 = gradeService.selectGradeBid1(scid);
    return  list1;
}

ClassesController

/* 聯動 */
@GetMapping("/select")
@ResponseBody
public List<GXClasses> select(Integer gid){
    List<GXClasses> list1 = classesService.selectClassBid1(gid);
    return  list1;
}

ClassesMapper.xml

<!-- 聯動 -->
<select id= "selectClassBid1" parameterType="Integer" resultMap="GXClassesResult">
    <include refid="selectClassesVo" />
    where aclass.gid = #{aclasses.gid}
</select>

GradeMapper.xml

 <!-- 三級聯動 -->
<select id= "selectGradeBid1" parameterType="Integer" resultMap="GXGradeResult">
    <include refid="selectGradeVo" />
    where agrade.scid = #{scid}
</select>

預設修改

edit.html

<div class="form-group">
            <label class="col-sm-2 control-label is-required">學生學校：</label>
            <div class="col-sm-10">
                <select id="aschool" class="form-control">
                    <option value="">請選擇學校</option>
                    <option th:each="sc:${school}" th:value="${sc.scid}" th:text="${sc.sname}"></option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label is-required">學生年級：</label>
            <div class="col-sm-10">
                <select id="agrade" class="form-control">
                    <option value="">請選擇年級</option>
                    <option th:each="g:${Grade}" th:value="${g.gid}" th:text="${g.gname}"></option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label is-required">學生班級：</label>
            <div class="col-sm-10">
                <select id="aclasses"  class="form-control" name="cid" >
                    <option value="">請選擇班級</option>
                    <option th:each="cl:${Classes}" th:value="${cl.cid}" th:text="${cl.cname}" th:field="*{cid}"></option>
                </select>
            </div>
        </div>

js

//聯動修改預設
$(document).ready(function () {
    //獲取controller層的函式，進行預設選中
    var gid = [[${gradeId}]];
    var scid = [[${schoolId}]];

    $("#agrade").val(gid);
        // alert(gid);
    $("#aschool").val(scid);
},

    $("#aschool").change(function () {//同上面一樣
        $.ajax({
            url: ctx + "system/grade/select",
            type: 'GET',
            data: {
                gid: $("#aschool").val(),
            },
            success:function (data) {
                $("#agrade").empty();
                $("#agrade").append("<option value=''>請選擇</option>");
                for (var i = 0; i < data.length; i++){
                    $("#agrade").append("<option value='" + data[i].gid + "'>" + data[i].gname + "</option>");
                }
            }
        })
    }),
    $("#agrade").change(function () {//同上面一樣
            $.ajax({
                url: ctx + "system/classes/select",
                type: 'GET',
                data: {
                    gid: $("#agrade").val(),
                },
                success:function (data) {
                    $("#aclasses").empty();
                    $("#aclasses").append("<option value=''>請選擇班級</option>");
                    for (var i = 0; i < data.length; i++){
                        $("#aclasses").append("<option value='" + data[i].cid + "'>" + data[i].cname + "</option>");
                    }
                },
            })
    }),
)

StudentController

@GetMapping("/edit/{id}")
public String edit(@PathVariable("id") int id, ModelMap mmap){
    mmap.put("student", studentService.selectStudentById(id));
    mmap.put("school",schoolService.selectSchoolList(new GXSchool()));
    mmap.put("grade",gradeService.selectGradeList(new GXGrade()));
    //通過id進行判斷並且取值，通過id進行逐層查詢獲取id，先向上準確查詢，在向下模糊查詢，預設選中在下面。
    String classes1= studentService.selectStudentById(id).getCid();
    String grade1 = classesService.selectClassesByCid(Integer.parseInt(classes1)).getGid();
    int school1 = gradeService.selectGradeBygid(Integer.parseInt(grade1)).getScid();

    mmap.put("classId",classes1);
    mmap.put("gradeId",grade1);
    mmap.put("schoolId",school1);

    mmap.put("Grade", gradeService.selectGradeBid1(school1));
    mmap.put("Classes", classesService.selectClassBid1(Integer.parseInt(grade1)));
    return prefix + "/edit";
}

相關文章