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>