级联两个bootstrap-table。一张表显示相关的数据,通过点击这张表的某一行,传过去对应的ID,刷新另外一张表。
二张表的代码(我用的插件,大家可以去网上直接下载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传过去,然后根据后台传过来的数据更新该表。

级联两个bootstrap-table。一张表显示相关的数据,通过点击这张表的某一行,传过去对应的ID,刷新另外一张表。的更多相关文章
- [转] BootStrap table增加一列显示序号
原文地址:https://blog.csdn.net/aboboo5200/article/details/78839208 最近由于项目需要,使用BootStrap table做数据展示,其中要在第 ...
- iview 中table列 一列显示多个数据(后台返回数组显示在列内)
一.首先出现的是比较复杂的一种情况(多个key) 1.首先页面显示效果如下 2.后台返回数据格式如下: 3.在iview中table的columns中的render函数: 4.具体代码 render: ...
- 记Bootstrap Table两种渲染方式
这里主要区别两种Bootstrap Table的数据渲染方式,一.属性渲染方式,二.JS渲染方式 工作直接接手前人的,之前都直接在table标签上渲染属性,后面因为项目需要,同一页面的表格,需要申请不 ...
- 新的表格展示利器 Bootstrap Table Ⅱ
上一篇文章介绍了Bootstrap Table的基本知识点和应用,本文针对上一篇文章中未解决的文件导出问题进行分析,同时介绍BootStrap Table的扩展功能,当行表格数据修改. 1.B ...
- 【转】bootstrap table轻松实现数据表格
在使用bootstrap table时可能在很多时候回用的表格来显示数据,如果自己写那肯定没问题,但是数据展示出来就麻烦多了,然而bootstrap table 封装了一套完善的数据表格组件,把从后台 ...
- Bootstrap Table表格一直加载(load)不了数据-解决办法
bootstrap-table是一个基于Bootstrap风格的强大的表格插件神器,官网:http://bootstrap-table.wenzhixin.net.cn/zh-cn/ 这里列出遇到的一 ...
- 161221、bootstrap table 实例
bootstrap table 封装了一套完善的数据表格组件,把下面的代码复制一下估计你需要的基本功能都有了,没有的再看看手册对比着我给的实例也能很快的熟悉了 客户端 <!DOCTYPE htm ...
- Bootstrap table 跨页全选
此代码是针对于bootstrap table中分页的跨页全选. 以下是整个bootstrap的定义 <script type="text/javascript" src=&q ...
- JS组件系列——表格组件神器:bootstrap table(二:父子表和行列调序)
前言:上篇 JS组件系列——表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...
随机推荐
- 最小生成树的Kruskal算法实现
最近在复习数据结构,所以想起了之前做的一个最小生成树算法.用Kruskal算法实现的,结合堆排序可以复习回顾数据结构.现在写出来与大家分享. 最小生成树算法思想:书上说的是在一给定的无向图G = (V ...
- 简单Java算法程序实现!斐波那契数列函数~
java编程基础--斐波那契数列 问题描述:一只青蛙一次可以跳上1级台阶,也可以跳上2级.求该青蛙跳上一个n级的台阶总共有多少种跳法. 思路:可能出现的情况:(1) n=1 ,一种方法 ;(2)n=2 ...
- angular 依赖注入原理
依赖注入(Dependency Injection,简称DI)是像C#,java等典型的面向对象语言框架设计原则控制反转的一种典型的一种实现方式,angular把它引入到js中,介绍angular依赖 ...
- Tomcat中JVM内存溢出及合理配置及maxThreads如何配置(转)
来源:http://www.tot.name/html/20150530/20150530102930.htm Tomcat本身不能直接在计算机上运行,需要依赖于硬件基础之上的操作系统和一个Java虚 ...
- Struts2漏洞利用实例
Struts2漏洞利用实例 如果存在struts2漏洞的站,administrator权限,但是无法加管理组,内网,shell访问500. 1.struts2 漏洞原理:struts2是一个框架,他在 ...
- UML学习(三)-----序列图
UML的模型中可分为两种,动态模型和静态模型.用例图.类图和对象图都是UML中的静态结构模型.而在UML系统动态模型的其中一种就是交互视图,它描述了执行系统功能的各个角色之间相互传递消息的顺序关系.序 ...
- Android -- 使用图库文件并可以裁剪文件(ImageView)
1. 本例子首先教大家如何打开图库 ,然后在使用裁剪功能,来裁剪图库里面的图片并进行显示工作
- 如何用inno setup打包activex
需要解决三个问题,运行环境检测与安装,按顺序执行安装,activex注册. 运行环境检测与安装 最开始的方法,百度之后,根据网上的搜索的结果,使用了RegQueryDWordValue(HKLM, ' ...
- 基于Spring + Spring MVC + Mybatis + shiro 高性能web构建
一直想写这篇文章,前段时间 痴迷于JavaScript.NodeJs.AngularJS,做了大量的研究,对前后端交互有了更深层次的认识. 今天抽个时间写这篇文章,我有预感,这将是一篇很详细的文章,详 ...
- C# Questions
What's the difference between linkedlist and array? How do you implement linkedlist? What's the diff ...