SpringBoot+jeefast框架 修改的下拉框三级联动默认显示后台数据

jeefast框架 修改的下拉框三级联动默认显示后台数据

附数据库表
student
在这里插入图片描述
classes表
在这里插入图片描述

school表
在这里插入图片描述
country表
在这里插入图片描述

student.js
点击修改后的事件

  update: function () {
            var studentId = getSelectedRow();
            if(studentId == null){
                return ;
            }
            vm.showList = false;
            vm.title = "修改";
            vm.getStudent(studentId);
            vm.getClassesDataThree();//让classes下拉框出数据
            vm.getSchoolData();//让school下拉框出数据
        },

然后根据主表主键获取数据

   getStudent: function(studentId){
            $.ajax({
                type: "POST",
                url: baseURL+"platform/student/info/"+studentId,
                contentType: "application/json",
                async:false,
                success: function(r){
                    vm.student=r.student;
                    vm.student.cid=r.student.ccid;///用于修改页面classes下拉框的默认选中
                    var cid = vm.student.ccid;//把cid看作classes表的主键

                    $.ajax({
                        type: "POST",
                        url: baseURL+"platform/classes/info/"+cid,
                        async:false,
                        success: function(r){
                            vm.student.sid=r.classes.ggid;//用于修改页面school下拉框的默认选中
                            var schoolsid =r.classes.ggid;//把schoolsid看作school的主键

                            $.ajax({
                                type: "POST",
                                url: baseURL+"platform/school/info/"+schoolsid,
                                async:false,
                                success: function(r){
                                    vm.student.couid=r.school.scid;//用于修改页面country下拉框的默认选中
                          

                                }
                            })
                        }
                    })

                }
            })
        },

附其中一个info方法,另外两个只需改名即可

@RequestMapping("/info/{studentId}")
    public R info(@PathVariable("studentId") Long studentId){
        System.out.println(1);
        Student student = studentService.selectById(studentId);
        return R.ok().put("student", student);
    }
    /**

此时country已经可以默认选中
html

<div class="form-group">
                <div class="col-sm-2 control-label">国家</div>
                <div class="col-sm-10">
                    <select v-model="student.couid" @change="getSchoolDataThree">//点击事件是触发school下拉框
                        <option value="0">--请选择国家--</option>
                        <option v-for="cou in country" :value="cou.couid">{{cou.couname}}</option>
                    </select>
                </div>
            </div>

开始shool下拉框默认选中

  getSchoolDataThree:function(){
            var ffid=vm.student.couid; //获取选中的项
            /*  alert(JSON.stringify(nnid));*/
            $.ajax({
                type: "POST",
                contentType: "application/json",
                url: baseURL+"platform/school/findByScid",
                data:JSON.stringify(ffid),
                async:false,
                success: function(r){
                    if(r.code == 0){
                        vm.school=r.list;
                    }else{
                        alert(r.msg);
                    }
                }
            })
        },

url走的控制器

@RequestMapping("/findByScid")
    public R findByGgid(@RequestBody int scid){
        List<School> list = schoolService.findByScid(scid);
        return R.ok().put("list", list);
    }

html中schoo下拉框已经可以默认显示

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

开始classes下拉框默认选中

   getClassesDataThree:function(){
            var nnid=vm.student.sid; //获取选中的项
          /*  alert(JSON.stringify(nnid));*/
            $.ajax({
                type: "POST",
                contentType: "application/json",
                url: baseURL+"platform/classes/findByGgid",
                data:JSON.stringify(nnid),
                async:false,
                success: function(r){
                    if(r.code == 0){
                        vm.classes=r.list;
                    }else{
                        alert(r.msg);
                    }
                }
            })
        },

url与上个相似
html中schoo下拉框已经可以默认显示

  <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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值