级联两个bootstrap-table。一张表显示相关的数据，通过点击这张表的某一行，传过去对应的ID，刷新另外一张表。
时间： 22:09:08
&&&& 阅读：229
&&&& 评论：
&&&& 收藏：0
标签：二张表的代码（我用的插件，大家可以去网上直接下载http://issues./bootstrap-table/）：
&div class="container" style="float:width:500height: 341px"&
&div id="toolbar"&
&button id="remove" class="btn btn-danger" disabled=""& &i class="glyphicon glyphicon-remove"&&/i& Delete &/button&
&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"&
&!-- 右边联动部分 --&
&div class="container" style="float: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"
箭头所指处是我新添加的函数（注意不是写成这样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传过去，然后根据后台传过来的数据更新该表。
&&国之画&&&& &&&&chrome插件&&
版权所有 京ICP备号-2
迷上了代码！bootstrap-table使用总结
bootstrap-table是在bootstrap-table的基础上写出来的，专门用于显示数据的表格插件。而bootstrap是来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，具有简便灵活，快速前端开发的优势
bootstrap-table使用总结
bootstrap-table是在bootstrap-table的基础上写出来的，专门用于显示数据的表格插件。而bootstrap是来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、、JAVASCRIPT 的，具有简便灵活，快速的优势。对与bootstrap在此就不在叙述。本文将着重讲解自己在项目中使用到bootstrap-table的一些理解和如何学习它。
首先交代一下，jquery ，bootstrap ，bootstrap-table 三者之间的关系。bootstrap很多部分代码涉及到了jquery的，也就是说 bootstrap是依赖jquery的，而我们要使用的bootstrap-table则是在bootstrap基础上创造出来的，所以在使用bootstrap-table之前必须引用 jquery 和bootstrap的相关js，css文件。
接着说，bootstrap-table的特点:与jquery-ui，jqgrid等表格显示插件而言，bootstrap-table扁平化，轻量级,对于一些轻量级的数据显示，他是绰绰有余，而对父子表等的支持也很好，最主要的是可以与bootstrap的其他标签无缝组合。
好了，简介的话就说到这，直接上代码和效果图之后，再做进一步的讨论。
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&
&title&bootstrap-table&/title&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&meta name="description" content="" /&
&meta name="keywords" content="" /&
&script type="text/javascript" src="./js/jquery-2.2.1.js"&&/script&
&script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"&&/script&
&script type="text/javascript" src="./bootstrap-table/bootstrap-table-all.js"&&/script&
&script type="text/javascript" src="./bootstrap-table/locale/bootstrap-table-zh-CN.js"&&/script&
&link rel="stylesheet" type="text/css" href="./bootstrap/css/bootstrap.min.css" &
&link rel="stylesheet" type="text/css" href="./bootstrap-table/bootstrap-table.min.css" &
&script language="javascript"&
&div class="col-md-offset-3
col-md-6"&
&div class="panel panel-default"&
&div class="panel-heading"&
&h3 class="panel-title text-center"&已添加教师账号&/h3&
&div class="panel-body"&
&div id="toolbar" class="btn-group"&
&button id="btn_edit" type="button" class="btn btn-default" &
&span class="glyphicon glyphicon-pencil" aria-hidden="true"&&/span&修改
&button id="btn_delete" type="button" class="btn btn-default"&
&span class="glyphicon glyphicon-remove" aria-hidden="true"&&/span&删除
&table id="teacher_table" data-toggle="table" data-url="./data.php" data-method="post"
data-query-params="queryParams"
data-toolbar="#toolbar"
data-pagination="true"
data-search="true"
data-show-refresh="true"
data-show-toggle="true"
data-show-columns="true"
data-page-size="5"&
&th data-field="name"&用户账号&/th&
&th data-field="pwd"&用户密码&/th&
&th data-field="t_name"&教师姓名&/th&
好接下来我们 分步骤剖析一下上面的代码的含义。
1.首先我们需要去下载相应的 jquery bootstrap bootstrap-table的包，这些网上都有教程，在此不再叙述如何下载。
标签中引用js和css文件名可知我们必须引进这几个文件。
注意bootstrap，下载编译过的压缩包中只有三个文件夹 css ，fonts， js
1.jquery-2.2.1.js ---- 最新的jquery文件
2.bootstrap.min.js --- 最新的bootstrap/js中bootstrap.min.js 压缩文件
3.bootstrap.min.css ---最新的bootstrap/css中bootstrap.min.css 压缩文件
4.bootstrap-table-all.js ---最新bootstrap-table下的js文件
5.bootstrap-table-zh-CN.js ----最新bootstrap-table/locale下的中文初始文件
6.bootstrap-table.min.css ---最新的bootstrap-table下css压缩文件
这六个必须配置，其中bootstrap-table-zh-CN.js是支持中文的js文件，只有加载了这个文件我们的一些表格显示信息才会被设置成中文。
我们来实验一下 将bootstrap-table-zh-CN.js去掉后的显示效果。
当然我们还可以把显示信息设置成其他语言，只要将bootstrap-table-zh-CN.js换成其他语言的js文件即可。bootstrap-table包中都有支持。
我们还可以看看这个文件中的，我们看一下，就知道这个文件干了什么了。
* Bootstrap Table Chinese translation
* Author: Zhixin Wen
(function ($) {
'use strict';
$.fn.bootstrapTable.locales['zh-CN'] = {
formatLoadingMessage: function () {
return '正在努力地加载数据中，请稍候……';
formatRecordsPerPage: function (pageNumber) {
return '每页显示 ' + pageNumber + ' 条记录';
formatShowingRows: function (pageFrom, pageTo, totalRows) {
return '显示第 ' + pageFrom + ' 到第 ' + pageTo + ' 条记录，总共 ' + totalRows + ' 条记录';
formatSearch: function () {
return '搜索';
formatNoMatches: function () {
return '没有找到匹配的记录';
formatPaginationSwitch: function () {
return '隐藏/显示分页';
formatRefresh: function () {
return '刷新';
formatToggle: function () {
return '切换';
formatColumns: function () {
return '列';
$.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['zh-CN']);
})(jQuery);
粗略一看就知道，引用该js文件后，在加载时，便祈祷了初始化的效果。将一些显示信息的内容转为相应的中内容。
2.接着我们来说相关的html代码，实际上与bootstrap-table有关的html代码只有这一部分
对，就只有一个table标签，再加上一大堆了 参数，而表格的展现形式就是通过这些在参数 来实现的。要知道有哪些样式和功能，光靠我列举肯定是九牛一毛，授人以鱼不如授人以渔，我告诉大家去哪查找这些类.class的含义。 我们可到bootstrap-table的专业网站上去查找 这有一个我用的链接
点击打开链接如果无效的可以 直接输入http://bootstrap-table./documentation
当然还可以在example中看一些例子
我们如何查看 相应的参数的含义呢？ 看到上面这张图，最右边的是一些选项，可以选这可以设置的表格属性，行属性，以及可绑定的事件。
点击表格属性 Table options 显示如下图，首先看到标题Name用于js创建表格是使用，而Attribute是html创建表格使用的，
举几个例子在我们上面的代码中有这么几个 参数他们的意思是：
data-url：索取数据的url。
data-method：请求方式。
data-height：设置表格的高
data-query-params="queryParams" ：设置
data-toolbar="#toolbar" :设置装按钮的容器为id为toolbar的。
data-pagination="true" ：设置是否显示页码数
data-search="true" ：设置search框
data-show-refresh="true" ：设置刷新按钮
data-show-toggle="true" ：设置数据显示格式
这下你该明白怎么样查看了吧！
注意其中下面段代码是核心，表示一行 一个格，data-field="name"表示一行中一个格子中的数据名 你可以把data-field理解成id，因为后台传送过来的数据就是根据data-field的来区分，那个数据发送给谁的。
对于不想用html静态生成，也可以使用js动态生成。给一个代码demo，要设置相关的参数只需要采用 上面讲的Name:options 即可。例如在html中设置数据请求的目的文件data-url："./data.php" 在js中只要声明 url:"./data.php"
$('#table').bootstrapTable({
columns: [{
field: 'id',
title: 'Item ID'
field: 'name',
title: 'Item Name'
field: 'price',
title: 'Item Price'
name: 'Item 1',
price: '$1'
name: 'Item 2',
price: '$2'
3.这样说，其他代码是干什么的，其中一部分代码是使用了 boostrap中的面板来设置格式，即将table镶嵌在面板中。 所去掉面板的代码后bootstrap-table的效果是这样的
仅仅是没有了面板而已。
4.传送数据的格式，bootstrap-table 接收的数据形式默认为json格式的
在上面可以看到请求的后台地址为:"./data.php",我们来看一下他的内容
"aoze","pwd"=&"","t_name"=&"张三");
$results[1]=array("name"=&"lisi","pwd"=&"1234","t_name"=&"李四");
$results[2]=array("name"=&"wangwu","pwd"=&"44455","t_name"=&"王五");
echo json_encode($results);
很简单吧！ 当然这只是我手写的一些测试数据，在项目中当然是从中查找出来的。
5.当然仅仅使显示数据有时候还是不够的，我们需要和table进行一些互动，比如进行一些删除，修改的功能，这时就需要用到bootstrap-table 的一些事件了。在上面的案例中我在table的中镶嵌了两个button如图
这个镶嵌的实现办法是在在table的属性中 添加了这么一行data-toolbar="#toolbar"
其意思就是在工具栏的一行添加 id为toolbar的标签。
在本人做到这个项目中，要通过这两个按钮对table中点击选中的行进行相应的操作。
编写相应的事件，首先为table绑定一个选中的触发事件，然后通过getSelectRow函数获得点击选中行的数据。
$('#teacher_table').on('click-row.bs.table', function (e, row, element)
$('.success').removeClass('success');//去除之前选中的行的，选中样式
$(element).addClass('success');//添加当前选中的 success样式用于区别
function getSelectedRow()
var index = $('#teacher_table').find('tr.success').data('index');//获得选中的行
return $('#teacher_table').bootstrapTable('getData')[index];//返回选中行所有数据bootstrap table表格使用方法详解
作者：sj2016
字体：[ ] 类型：转载 时间：
这篇文章主要为大家详细介绍了bootstrap table表格使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了bootstrap table表格的使用方法，供大家参考，具体内容如下
1.进入页面，根据指定的URL加载数据(json格式)
2.加载成功，根据$table.bootstrapTable({options})显示表格样式。
感觉还是挺漂亮的哈，OK，下面贴代码解释功能。&
开始之前，当然要引用js啦
&link href="~/Content/bootstrap.min.css" rel="stylesheet" /&
&link href="~/Content/bootstrap-theme.min.css" rel="stylesheet" /&
&link href="~/Content/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" /&
&script src="~/Scripts/jquery-1.9.1.js"&&/script&
&script src="~/Scripts/bootstrap.min.js"&&/script&
&script src="~/Content/bootstrap-table/bootstrap-table.min.js"&&/script&
&html代码，一是指定table要使用的工具栏，而是写一个空的table
&div class="row"&
&div class="col-md-12"&
&div class="btn-group" id="toobar" role="group" aria-label="..."&
&button type="button" class="btn btn-default"&
&span class="glyphicon glyphicon-plus"&&/span&新增
&button type="button" class="btn btn-default"&
&span class="glyphicon glyphicon-edit"&&/span&修改
&button type="button" class="btn btn-default"&
&span class="glyphicon glyphicon-remove"&&/span&删除
&table id="myTable"&&/table&
js代码，使用("#table").bootstraptable({options})填充table
$("#myTable").bootstrapTable({
url: '/BootstrapTable/GetTestData',
method: 'get',
toolbar: '#toobar',//工具列
striped: true,//隔行换色
cache: false,//禁用缓存
pagination: true,//启动分页
sidePagination: 'client',//分页方式
pageNumber: 1,//初始化table时显示的页码
pageSize: 10,//每页条目
showFooter: false,//是否显示列脚
showPaginationSwitch: true,//是否显示 数据条数选择框
sortable: false,//排序
search: true,//启用搜索
showColumns: true,//是否显示 内容列下拉框
showRefresh: true,//显示刷新按钮
idField: 'SystemCode',//key值栏位
clickToSelect: true,//点击选中checkbox
singleSelect: true,//启用单行选中
columns: [{
checkbox: true
field: 'SystemCode',
title: '系统代码',
titleTooltip: 'young for you'
field: 'SystemDesc',
title: '系统名称'
field: 'Isvalid',
title: '是否有效'
field: 'UUser',
title: '更新人'
field: 'UDate',
title: '更新时间'
onClickCell: function (field, value, row, $element) {
//alert(row.SystemDesc);
其中URL是table 数据源地址，如果table启动了分页功能，后台取数据的方法要加上limit、offset两个int类型的参数，这里把后台代码也贴一下。
public JsonResult GetTestData(int limit, int offset)
BugzillaModelContainer db = new BugzillaModelContainer();
List&B_SystemInfo& systemInfo = db.B_SystemInfo.ToList();
for (int i = 0; i & 20; i++)
B_SystemInfo tempSystem = new B_SystemInfo();
tempSystem.SystemCode = (i + 1).ToString();
tempSystem.SystemDesc = "测试系统" + (i + 1).ToString();
tempSystem.Isvalid = "Y";
tempSystem.UUser = "result_for" + (i + 1).ToString();
tempSystem.UDate = System.DateTime.Now.ToShortDateString();
systemInfo.Add(tempSystem);
var total = systemInfo.Count();
var rows = systemInfo.Skip(offset).Take(limit).ToList();
return Json(systemInfo, JsonRequestBehavior.AllowGet);
offset表示从多少条数据开始取，limit表示取多少条数据。
客户端搜索只要设置search=true即可。&
服务端搜索，需要设置参数。
("#table").bootstraptable({queryParams: oTableInit.queryParams}),//传递参数（*）
然后获取查询的参数
//得到查询的参数
oTableInit.queryParams = function (params) {
var temp = {
//这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
limit: params.limit, //页面大小
offset: params.offset, //页码
systemcode: $("#systemcode").val(),
通过button事件刷新table，重新获取数据源，即可。
$("#btnQuery").click(function () {
$table.bootstrapTable('refresh');
最后贴上全部html代码~
&!DOCTYPE html&
&meta name="viewport" content="width=device-width" /&
&title&Index&/title&
&link href="~/Content/bootstrap.min.css" rel="external nofollow" rel="stylesheet" /&
&link href="~/Content/bootstrap-theme.min.css" rel="external nofollow" rel="stylesheet" /&
&link href="~/Content/bootstrap-table/bootstrap-table.min.css" rel="external nofollow" rel="stylesheet" /&
&script src="~/Scripts/jquery-1.9.1.js"&&/script&
&script src="~/Scripts/bootstrap.min.js"&&/script&
&script src="~/Content/bootstrap-table/bootstrap-table.min.js"&&/script&
&div class="container"&
&div class="row"&
&div class="col-md-8"&
&div class="row"&
&div class="col-md-12"&
&div class="btn-group" id="toobar" role="group" aria-label="..."&
&button type="button" class="btn btn-default"&
&span class="glyphicon glyphicon-plus"&&/span&新增
&button type="button" class="btn btn-default"&
&span class="glyphicon glyphicon-edit"&&/span&修改
&button type="button" class="btn btn-default"&
&span class="glyphicon glyphicon-remove"&&/span&删除
&table id="myTable"&&/table&
$(function () {
var itable = TableInit();
itable.Init();
var TableInit = function () {
var myTableInit = new Object();
myTableInit.Init = function () {
$("#myTable").bootstrapTable({
url: '/BootstrapTable/GetTestData',
method: 'get',
toolbar: '#toobar',//工具列
striped: true,//隔行换色
cache: false,//禁用缓存
pagination: true,//启动分页
sidePagination: 'client',//分页方式
pageNumber: 1,//初始化table时显示的页码
pageSize: 10,//每页条目
showFooter: false,//是否显示列脚
showPaginationSwitch: true,//是否显示 数据条数选择框
sortable: false,//排序
search: true,//启用搜索
showColumns: true,//是否显示 内容列下拉框
showRefresh: true,//显示刷新按钮
idField: 'SystemCode',//key值栏位
clickToSelect: true,//点击选中checkbox
singleSelect: true,//启用单行选中
columns: [{
checkbox: true
field: 'SystemCode',
title: '系统代码',
titleTooltip: 'young for you'
field: 'SystemDesc',
title: '系统名称'
field: 'Isvalid',
title: '是否有效'
field: 'UUser',
title: '更新人'
field: 'UDate',
title: '更新时间'
onClickCell: function (field, value, row, $element) {
//alert(row.SystemDesc);
return myTableI
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具解决bootstrap-table多次请求只触发一次的问题 - CSDN博客
解决bootstrap-table多次请求只触发一次的问题
问题：通过设置查询条件，点击按钮触发bootstrap-table，触发以后无法再次触发
解决方案：在初始化table之前，要将table销毁，否则会保留上次加载的内容
$(&#table&).bootstrapTable('destroy');&
$(&#table&).bootstrapTable({
dataType: &json&,
method: 'get',
contentType: &application/x-www-form-urlencoded&,
cache: false,
queryParams: queryParams,
columns:col,
pagination:true,
sidePagination:'server',
pageNumber:1,
pageSize:10,
pageList:[10, 25, 50, 100, 'All'],
onCheck: function (row) {
//遍历所有的row 获取name
//params[&ids&] .add(row.agancyid);
params[&ids&] += row[&&+id+&&] +&,&;
本文已收录于以下专栏：
相关文章推荐
问题：通过设置查询条件，点击按钮触发bootstrap-table，触发以后无法再次触发
解决方案：在初始化table之前，要将table销毁，否则会保留上次加载的内容
$(&#table...
在初始化table之前，要将table销毁，否则会保留上次加载的内容
1 $(&#table&).bootstrapTable('destroy');
2 $(&#table&).bo...
2.bootstrap组件（js+css）
3.bootstrap table组件及中文包（js+css+js）
使用bootstrap table可以很方便的开发后台表格，对数据进行异步更新，编辑。下面就来介绍一下bootstrap table的详细使用方法：
因为之前在官网也找了很久的教程，源码感觉隐藏的比较...
本文就bootstrapTable refresh 方法如何传递参数做简单举例说明。下面代码中，一个table，一个button，单击button会触发刷新表格操作。
&link rel=&sty...
说明：操作前必须导入jquery.js、bootstrap.js和boostrapTable.min.js1、DIV数据：
&a href=&javasc...
这个问题也困扰了我很长时间，准确的说正是因为他的存储过程无法在同一连接中2次或者多次执行，我大幅修该了程序架构，全部题换成了sql，但是毕竟sql无法执行有相当逻辑的代码，最总让我从新测试以求寻找解决...
今天在使用bootstrap table中的数据导出功能时，遇到一个奇怪的问题，在使用测试数据进行测试的时候可以正常的将表格中的数据导出到excel、txt等文件中，但当将表格应用到web项目中时，当...
前言：最近项目里面需要用到表格的冻结列功能，所谓“冻结列”，就是某些情况下表格的列比较多，需要固定前面的几列，后面的列滚动。遗憾的是，bootstrap table里自带的fixed column功能...
他的最新文章
讲师：吴岸城
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)}