StringBoot+jeefast班级校区表下拉框二级联动

StringBoot+jeefast班级校区下拉框二级联动

先附上数据库
student表

classes表

school表

先做school表的下拉框
student.html

  <div class="form-group">
                <div class="col-sm-2 control-label">校区</div>
                <div class="col-sm-10">
                    <select   @change="getClassesData" id="selectGgid">
                        <option value="0">--请选择校区--</option>
                        <option v-for="s in school" :value="s.sid">{{s.sname}}</option>
                    </select>
                </div>
            </div>

@change="getClassesData"是选完校区就自动调用选班级的方法
id=“selectGgid” 是为了获取sid的虚拟函数

student.js

getSchoolData:function(){
            $.post(baseURL + "platform/school/findAll",{},function (result) {
                vm.school=result.list;

            })
        },

SchoolController

@RequestMapping("/findAll")
    @RequiresPermissions("platform:school:findAll")
    public R findAll(){
        Map<String,Object> map = new HashMap<>();
        List<School> list = schoolService.selectByMap(map);
        return R.ok().put("list", list);
    }

再做classes表下拉框
student.html

            <div class="form-group">
                <div class="col-sm-2 control-label">班级</div>
                <div class="col-sm-10">
                    <select v-model="student.ccid">
                        <option value="0">--请选择班级--</option>
                        <option v-for="cla in classes" :value="cla.cid">{{cla.cname}}</option>
                    </select>
                </div>
            </div>

model="student.ccid：ccid是student链接classes的外键 选择班级后 获取到值 修改到主表
student.js

 getClassesData:function(){
            var ggid=$("#selectGgid").val(); //获取选中的项
            $.ajax({
                type: "POST",
                url: baseURL+"platform/classes/findByGgid",
                contentType: "application/json",
                data:ggid,
                success: function(r){
                    if(r.code == 0){
                        vm.classes=r.list;
                    }else{
                        alert(r.msg);
                    }
                }
            })
        },

var ggid=$("#selectGgid").val():获取到school下拉框传来的值并且赋给定义的函数

ClassesController

   @RequestMapping("/findByGgid")
   @RequiresPermissions("platform:classes:findByGgid")
   public R findByGgid(@RequestBody int ggid){
       List<Classes> list = classesService.findByGgid(ggid);
       return R.ok().put("list", list);
   }

先接受js里传来的data里的值 然后再通过写的方法获取classes对应的数据
ClassesServiceImpl

   @Override
    public  List<Classes> findByGgid(int ggid){
        List<Classes> list = classesDao.findByGgid(ggid);
        return list;
    };

ClassesService

List<Classes> findByGgid(int ggid);

ClassesDao

List<Classes> findByGgid(int ggid);

classes.xml

 <select id="findByGgid" resultType="cn.jeefast.modules.platform.entity.Classes">
        select * from classes where ggid = #{ggid}
    </select>

#{ggid}是接受ClassesController传来的值