欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

若依框架下拉框修改默认选中和添加

程序员文章站 2022-03-22 11:13:38
添加直接复制查询的就可以联动下拉框查询...

添加直接复制查询的就可以联动下拉框查询

修改

修改的HTML页面
若依框架下拉框修改默认选中和添加

<div class="form-group">
                <label class="col-sm-2 control-label is-required">学生学校：</label>
                <div class="col-sm-10">
                    <select id="school" name="sysGrade.gradeSchool"  class="form-control">
                        <option value="">请选择学校</option>
                        <option th:each="s1:${school}" th:value="${s1.schoolId}" th:text="${s1.schoolName}" ></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="grade" class="form-control">
                        <option value="">请选择年级</option>
                        <option th:each="s2:${grade}" th:value="${s2.gradeId}" th:text="${s2.gradeName}" ></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="classes"  class="form-control">
                        <option value="">请选择班级</option>
                        <option th:each="s3:${classes}" th:value="${s3.classesId}" th:text="${s3.classesName}" th:field="*{studentClass}"></option>
                    </select>
                </div>
            </div>

            <div class="form-group">
<!--                <label class="col-sm-2 control-label">学生班级：</label>-->
                <div class="col-sm-10">
                    <input id="studentClass" name="studentClass" th:field="*{studentClass}" class="form-control" type="hidden" required>
                </div>
            </div>

js方法

<script>
        $(document).ready(function () {
            //获取controller层的函数，进行默认选中
            var schoolId = [[${schoolId1}]];
            var gradeId = [[${gradeId1}]];
            var classesId = [[${classesId1}]];
            $("#school").val(schoolId);
            $("#grade").val(gradeId);
            // $("#classes").val(classesId);//这里直接用th:field直接取student的值就OK了
            $("#school").change(function () {//同上面一样
                // alert($("#school").val())
                $.ajax({
                    url: ctx + "system/grade/select",
                    type: 'GET',
                    data: {
                        gradeSchool: $("#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/classes/select",
                    type: 'GET',
                    data: {
                        classesGrade: $("#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].classesId + "'>" + data[i].classesName + "</option>");
                        }
                    }
                })
            });
            $("#classes").change(function () {//赋值给input输入框添加到数据库
                $("#studentClass").val($("#classes").val());
            })
        })
    </script>

controller层
运用的是修改取值的方法，引用谁的当然要引入谁
其他层的就不在多些，只写一个grade的
若依框架下拉框修改默认选中和添加

/**
     * 修改公告
     */
    @GetMapping("/edit/{studentId}")
    public String edit(@PathVariable("studentId") Long studentId, ModelMap mmap)
    {
        mmap.put("student", studentService.selectStudentById(studentId));
        mmap.put("school", schoolService.selectSchoolList(new SysSchool()));

        //通过id进行判断并且取值，通过id进行逐层查询获取id，先向上准确查询，在向下模糊查询，默认选中在下面。
        String classesId1= studentService.selectStudentById(studentId).getStudentClass();
        String gradeId1 = classesService.selectClassesById(Long.parseLong(classesId1)).getClassesGrade();
        String schoolId1 = gradeService.selectGradeById(Long.parseLong(gradeId1)).getGradeSchool();

        //赋值让HTML页面进行接收，进行默认选中
        mmap.put("classesId1",classesId1);
        mmap.put("gradeId1",gradeId1);
        mmap.put("schoolId1",schoolId1);
        mmap.put("grade",gradeService.selectGradeById1(Long.parseLong(schoolId1)));
        mmap.put("classes", classesService.selectClassesById1(Long.parseLong(gradeId1)));
        return prefix + "/edit";
    }

service层

gerade

public SysGrade selectGradeById(Long gradeId);
    public List<SysGrade> selectGradeById1(Long gradeSchool);
    public List<SysGrade> selectGradeList(SysGrade grade);

serviceImpl层
grade

@Override
    public SysGrade selectGradeById(Long gradeId)
    {
        return gradeMapper.selectGradeById(gradeId);
    }
    @Override
    public List<SysGrade> selectGradeById1(Long gradeSchool)
    {
        return gradeMapper.selectGradeById1(gradeSchool);
    }
    @Override
    public List<SysGrade> selectGradeList(SysGrade grade)
    {
        return gradeMapper.selectGradeList(grade);
    }

mapper层
grade

public SysGrade selectGradeById(Long gradeId);
    public List<SysGrade> selectGradeById1(Long gradeSchool);
    public List<SysGrade> selectGradeList(SysGrade grade);

mapper.xml
若依框架下拉框修改默认选中和添加

添加

HTML页面

<div class="form-group">
				<label class="col-sm-2 control-label is-required">学生学校：</label>
				<div class="col-sm-10">
					<select id="school" name="sysGrade.gradeSchool"  class="form-control">
						<option value="">请选择学校</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="grade" name="sysClasses.classesGrade"  class="form-control">
						<option value="">请选择年级</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="classes" name="studentClass"  class="form-control">
						<option value="">请选择班级</option>
					</select>
				</div>
			</div>

js方法

<script type="text/javascript">
		$(document).ready(function() {//页面加载时运行此函数  放在最前端
			$.ajax({
				url: ctx + "system/school/select",
				type: 'GET',
				success:function (data) {
					<!--清空下拉框中的缓存-->
					$("#school").empty();
					<!--避免下拉框的值不变-->
					$("#school").append("<option value=''>请选择学校</option>");
					<!--使用循环解析后端传来的数据，并用使用js动态拼接html语言-->
					for (var i = 0; i < data.length; i++){
						$("#school").append("<option value='" + data[i].schoolId + "'>" + data[i].schoolName + "</option>");
					}
				}
			});
			$("#school").change(function () {//同上面一样
				// alert($("#school").val())
				$.ajax({
					url: ctx + "system/grade/select",
					type: 'GET',
					data: {
						gradeSchool: $("#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/classes/select",
					type: 'GET',
					data: {
						classesGrade: $("#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].classesId + "'>" + data[i].classesName + "</option>");
						}
					}
				})
			});
		})
	</script>

本文地址：https://blog.csdn.net/weixin_45853881/article/details/110120792

相关标签： 若依 ajax java

上一篇： 在UNIX或Linux中TTY是什么意思

下一篇： 遮挡了每一个偷窥的目光

推荐阅读