用户登录
用户注册

分享至

若依--实现--二级联动

  • 作者: 女汉子x
  • 来源: 51数据库
  • 2021-09-05

实体类
要包含联动所要查询的能容

Student实体类

classes实体类

Classes service

//二级联动
    public List<SysClasses> selectClassesById1(Long gid);

classes impl

 //二级联动
    @Override
    public List<SysClasses> selectClassesById1(Long gid)
    {
        return classesMapper.selectClassesById1(gid);
    }

Classes mapper

  //二级联动
    public List<SysClasses> selectClassesById1(Long gid);

classesmapper.xml

<select id="selectClassesById1" parameterType="Long" resultMap="SysClassesResult">
        <include refid="selectClassesVo"/>
        where sys_classes.gid = #{classes.gid}
    </select>

Controller

//二级联动
    @GetMapping("/select")
    @ResponseBody
    public List<SysClasses> select(Long gid)
    {
        List<SysClasses> list1 = classesService.selectClassesById1(gid);
        return  list1;
    }

 //二级联动
    @GetMapping("/select")
    @ResponseBody
    public List<SysGrade> select()
    {
        List<SysGrade> list = gradeService.selectGradeList(new SysGrade());
        return  list;
    }

add.xml

一定要把红框的部分注销或者删除掉


 <script type="text/javascript">

$(document).ready(function() {   //页面加载时运行此函数  放在最前端
			$.ajax({
				url: ctx + "system/grade/select",
				type: 'GET',
				success: function (data) {
					<!--清空下拉框中的缓存-->
					$("#grade").empty();
					<!--避免下拉框的值不变-->
					$("#grade").append("<option value=''>请选择年级</option>");
					<!--使用循环解析后端传来的数据,并用使用js动态拼接html语言-->
					for (var i = 0; i < data.length; i++) {
						$("#grade").append("<option value='" + data[i].gid + "'>" + data[i].gname + "</option>");
					}
				}
			});
		//
			$("#grade").change(function () {//同上面一样
				$.ajax({
					url: ctx + "system/classes/select",
					type: 'GET',
					data: {
						gid: $("#grade").val(),
					},
					success:function (data) {
						// alert(JSON.stringify(data))
						$("#classes").empty();
						$("#classes").append("<option value=''>请选择班级</option>");
						for (var i = 0; i < data.length; i++){
							$("#classes").append("<option value='" + data[i].cid + "'>" + data[i].cname + "</option>");
						}
					}
				})
			});
		});
 </script>

效果图

软件
前端设计
程序设计
Java相关