级联两个bootstrap-table。一张表显示相关的数据,通过点击这张表的某一行,传过去对应的ID,刷新另外一张表。
2024-10-11 11:11:54
二张表的代码(我用的插件,大家可以去网上直接下载http://issues.wenzhixin.net.cn/bootstrap-table/):
<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传过去,然后根据后台传过来的数据更新该表。
最新文章
- Linux 系统常用命令汇总(三) 用户和用户组管理
- Eclipse开发环境JDK版本问题和校验问题
- 事务复制5: Transaction and Command
- Codeforces Round #383 (Div. 2) D 分组背包
- C语言(1)
- hadoop运维经验
- python 元组操作
- iOS 判断电话号 几种方法
- Spring的注入问题
- 解决uploadify多图片上传部分图片丢失,且不提示任何错误的问题
- [剑指OFFER] 斐波那契数列- 跳台阶 变态跳台阶 矩形覆盖
- linux下挂载NTFS分区错误修复
- Linux基础知识第七讲,用户权限以及用户操作命令
- torch分类问题
- 设置textfield 文字左边距
- angularjs 做不到实时脏值查询
- 【Web】网页字体图标的使用
- Python实现汉诺塔问题的可视化(以动画的形式展示移动过程)
- HDU 4864 Task(贪心)
- MySQL—练习2
热门文章
- VR的国内研究现状及发展趋势
- margin-before: 1em; margin-after: 1em;margin-start:0px;margin-end: 0px;
- [转载]memcached完全剖析--1. memcached的基础
- Marshal的简单使用
- Python中下划线---完全解读(转)
- QQ列表展示
- 我的c++学习(9)指针
- JS ECMAScript 5中的every 和 some方法进行逻辑判断
- js最佳继承范型
- activity 、window与view的关系(下)