级联两个bootstrap-table。一张表显示相关的数据,通过点击这张表的某一行,传过去对应的ID,刷新另外一张表。
2016-06-13 21:08
495 查看
二张表的代码(我用的插件,大家可以去网上直接下载http://issues.wenzhixin.net.cn/bootstrap-table/):
箭头所指处是我新添加的函数(注意不是写成这样data-query-params="getPatientId()")
然后给第一张表添加行点击事件:
这里添加到插件对应模块:
这样每次点击的时候 调用表2的refresh方法的同时然后把对应的ID传过去,然后根据后台传过来的数据更新该表。
<div class="container" style="float: left;width:500px;height: 341px"> <div id="toolbar"> <button id="remove" class="btn btn-danger" disabled=""> <i class="glyphicon glyphicon-remove"></i> Delete </button> </div> <table id="table" data-toolbar="#toolbar" data-search="true" data-detail-formatter="detailFormatter" data-minimum-count-columns="2" data-show-pagination-switch="true" data-pagination="true" data-id-field="id" data-page-list="[10, 25, 50, 100, ALL]" data-show-footer="false" data-side-pagination="server" data-url="./system/Dealer_obtainMachAndName" data-response-handler="responseHandler"> </table> </div> <!-- 右边联动部分 --> <div class="container" style="float: left;width:500px"> <table id="tablelink" data-toolbar="#toolbar" data-detail-formatter="detailFormatter" data-minimum-count-columns="2" data-pagination="true" data-id-field="id" data-page-list="[10, 25, 50, 100, ALL]" data-show-footer="false" data-side-pagination="server" data-url="./system/Dealer_obtainAIllerMes" data-response-handler="responseHandler" data-query-params="getPatientId" </table> </div>
箭头所指处是我新添加的函数(注意不是写成这样data-query-params="getPatientId()")
然后给第一张表添加行点击事件:
$('#table').on('check.bs.table', function (e, row, $element) { // console.log(row, $element); //getPatientId(); $('#tablelink').bootstrapTable('refresh',{url: "./system/Dealer_obtainAIllerMes"} ); });
这里添加到插件对应模块:
这样每次点击的时候 调用表2的refresh方法的同时然后把对应的ID传过去,然后根据后台传过来的数据更新该表。
相关文章推荐
- bootstrap sr-only
- bootstrap首页制作
- Bootstrap标签页插件
- Bootstrap滚动监听插件
- bootstrap走动的进度条
- Bootstrap tutorial: A responsive design tutorial with Twitter Bootstrap 3
- BootStrap智能表单实战系列(十一)级联下拉的支持
- 给AspNetPager分页控件添加bootstrap样式
- BootStrap 智能表单实战系列(十)自动完成组件的支持
- BootStrap智能表单实战系列(九)表单图片上传的支持
- Bootstrap下拉菜单插件
- Bootstrap模态框插件
- BootStrap智能表单实战系列(八)表单配置json详解
- BootStrap智能表单实战系列(七)验证的支持
- bootstrap-datepicker 与bootstrapValidator同时使用时,选择日期后,无法正常触发校验
- BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
- BootStrap 智能表单实战系列(五) 表单依赖插件处理
- springMVC + mybatis + bootstrap 框架学习
- BootStrap智能表单实战系列(四)表单布局介绍
- [转]ASP.NET MVC4+BootStrap 实战(一)