二级联动和回显

效果如下:

二级联动

我们首先要查询出年级表的内容,在年级表的控制层中;
Controller

/*** 查询nj表的内容  @RequestMapping("/spr/nj")*/@RequestMapping("/all")public R all() {List<SprNj> all=sprNjService.selectList(new EntityWrapper<SprNj>());return R.ok().put("all", all);}

js界面代码:

     getnJ:function(){//这个方法写在vue里面,并用mounted自动调用$.get(baseURL+"/spr/nj/all",function(r){vm.nJ=r.all;        //定义一个年级数组,把控制器查询的内容放到nJ这个数组vm.stu.cNumber=vm.cNumber; //回显})},

html界面:

<div class="form-group"><div class="col-sm-2 control-label">年级</div><div class="col-sm-10"><select v-model="dasc" v-on:change="change()">//点击哪一级,就会出来那一级对应的主键id,//存放到在定义的dasc变量里面,然后在通过dasc这个变量,//查询年级===》》班级<option :value="0">--请选择--</option><option v-for="n in nJ" :value="n.id">{{n.njname}}</option></select></div></div>

查询到dasc变量

然后把这个变量传给班级的控制器

change:function(){//alert(this.dasc);$.post(baseURL+"/platform/classes/findById",{njid:this.dasc},function(data){ //把我dasc变量传到控制器里面
//              alert(JSON.stringify(data));vm.aaa=data;   //把返回的数据放到aaa数组里面,从html遍历出来vm.stu.cNumber=vm.cNumber;  //把年级的id赋给==》 回显})},

@RequestMapping("/findById")@ResponseBodypublic List<PfClasses> findById(HttpServletRequest request) {Integer njid=Integer.parseInt(request.getParameter("njid"));
//      System.out.println(njid);
//      pfClassesService.selectById(njid);List<PfClasses> pfClasses=pfClassesService.findById(njid);return pfClasses;}

html:

<div class="form-group" id="app"><div class="col-sm-2 control-label">班级</div><div class="col-sm-10"><select v-model="stu.cNumber"><option :value="0">--请选择--</option><option v-for="a in aaa" :value="a.id">{{a.cname}}</option></select></div></div>

回显

点击修改会触发update事件

<a v-if="hasPermission('spr:stu:update')" class="btn btn-primary btn-sm" @click="update"><i class="fa fa-pencil-square-o"></i>&nbsp;修改</a>

update事件又会触发getStu方法

update: function () {var stuId = getSelectedRow();if(stuId == null){return ;}vm.showList = false;vm.title = "修改";vm.getStu(stuId);},

getStu: function(stuId){$.get(baseURL + "spr/stu/info/"+stuId, function(r){vm.stu = r.stu;vm.cNumber=r.stu.cNumber;  //存储班级表的 id vm.cNumber// cNumber(班级)  ==> 年级() ==> 之前$.get(baseURL + "platform/classes/info/"+r.stu.cNumber, function(c){//                  alert(JSON.stringify(c));// njid(年级) vm.dasc = c.classes.njid;vm.change();});});},

这个方法就会调用上面的change事件;达到回显的效果

总结

联动:通过年级===>>>班级回显:通过班级>>>年级>>>
年级表中年级对应了一个主键,这个主键存到一个变量里面,通过这个变量
传到控制器中的班级表上面,班级表通过年级对应的变量，在查询年级>>对应的班级内容;查询到的内容放到一个数组里,然后在年级的下拉框,遍历出年级>>>班级;

下拉框的二级联动和回显相关推荐

php jq ajax 4个下拉框联动案列,Ajax与Jquery结合数据库做出实现下拉框的二级联动...
这次给大家带来Ajax与Jquery结合数据库做出实现下拉框的二级联动,Ajax与Jquery结合数据库做出实现下拉框二级联动的注意事项有哪些,下面就是实战案例,一起来看一下. 首先我们需要先建立好数 ...
jquery ajax java二级联动_使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例...
首先我们需要先建立好数据库,将一些数据插入进去需要两张表: province:省份表 city: 城市表如图: 然后再在java中建立相关的实体类与之对应再然后,我们就能开始做jdbc的操作了 ...
二级联动（两个下拉框的二级联动，和单选按钮与下拉框的二级联动）
1,两个下拉框的二级联动代码: <!DOCTYPE html><html lang="en"><head><meta charset=& ...
HTML下拉框、二级联动 select多级联动
html + ajax +php 二级联动下拉框 <!DOCTYPE html> <html> <head> </head> <style> ...
vue+element下拉框实现二级联动
参考文章:https://blog.csdn.net/qq_42341025/article/details/86601093 <el-form-item label-width="8 ...
layui框架----下拉框的二级联动
一.layui.use 这里layui的官方文档:https://www.layui.com/doc/ layui这个框架采用的是经典模块化 layui的内置模块不是默认就加载好的,必须要执行启动模块 ...
vue实现下拉二级联动_select下拉菜单实现二级联动效果
需求:建立年级.班级两个数据表,获取年级表信息,根据年级,获取相应的班级效果图: 不完美的地方就是在不选择年级的时候,是不能选择任何班级的. 代码部分首先是建立两个表的实体需要注意的就是写注解了 ...
jquery ajax下拉联动,基于jQuery Ajax实现下拉框无刷新联动
本文实例为大家分享了jQuery Ajax实现下拉框无刷新联动的具体代码,供大家参考,具体内容如下 HTML代码: @{ Layout = null; } @using DAL; @using Sys ...
java select下拉标签_java中下拉框select和单选按钮的回显操作
前提: 1.下拉框select 请选择部门 selected="selected" >${department.department} 2.单选按钮radio的回显 chec ...

下拉框的二级联动和回显

二级联动和回显

二级联动

回显

总结

下拉框的二级联动和回显相关推荐

最新文章

热门文章