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传来的值