级联两个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 ...
随机推荐
- 解决dom4j java.lang.NoClassDefFoundError: org/jaxen/JaxenException
即使用这个方法需要以下两个包: dom4j-1.6.1.jar-306 KB jaxen-1.1-beta-6.jar-238 KB 或者 <dependency> <groupId ...
- Client病毒已感染超7万人 暗扣费并频弹广告
恶意木马病毒横行,您的钱包还hold得住吗?猎豹移动安全实验室与安天AVL移动安全团队于2015年下半年,共同截获一款名为Client的木马病毒,并且对该病毒进行持续监测.通过进一步关注,我们发现该病 ...
- error C2144: 语法错误:“int”的前面应有“;”
百度网上都说是中文输入的问题. 但我的错误是函数声明时后面忘了加 :真是要死......
- Oracle在存储过程中如何返回结果集
Oracle和Sqlserver不一样的地方有很多. 个人最深的体会是存储过程返回结果集,在Sqlserver中直接select查询就行,Oracle就不行了. 这里,就用最简单的例子说明存储过程返回 ...
- iOS APP提交上架最新流程(转)
时隔1年又让我鼓捣iOS,刚接手就是上架,经验值为0的我,虽然内心是拒绝的,但还是要接受这项任务滴!也就是在被拒后重新审核,再改在提交...这样 反复的过程中也对上架流程熟悉了好多,写篇帖子送给同为菜 ...
- 添加已运行daemon进程(falcon-agent)到supervisor测试
falcon-agent now is running already, pid= falcon-agent now is running already, pid= falcon-agent now ...
- Hibernate的抓取策略
立即检索:当执行某行代码的时候,马上发出SQL语句进行查询(get())延迟检索:当执行某行代码的时候,不会马上发出SQL语句进行查询.当真正使用这个对象的时候才会发送SQL语句(load()) 类级 ...
- 意法STM32F1系列MCU单片机解密芯片破解复制
意法STM32F1系列MCU单片机解密芯片破解复制 STM32F1系列MCU芯片解密: STM32F100解密 | STM32F101解密 | STM32F102解密 | STM32F103解密 | ...
- linux下 html转pdf
其实很简单的, 在当前文件夹中打开终端, 只需要一个命令就好 wkhtmltopdf test.html test.pdf 这样一个test.html的文件就转为test.pdf 的pdf文件啦!
- 实践:Backbone作前端,Django+Tastypie作后端的简单Web在线聊天室
一.界面设计: 二.数据模型设计 id 每个发言都有一个独立的id由tastypie自动生成 content 发言的内容 username 发言者 date 发言时间 三.前端制作 这里没有用到Bac ...