引导表:如何将一个表嵌套到另一个表中
bootstrap-table: how to nest one table into another?
我正在使用这个引导表。我想将一个表嵌套到另一个表中。
$(document).ready(function() {
var t = [{
"id": "1",
"name": "john",
}, {
"id": "2",
"name": "ted"
}];
//TABLE 1
$('#summaryTable').bootstrapTable({
data: t,
detailFormatter: detailFormatter
});
function detailFormatter(index, row, element) {
$(element).html(row.name);
$(element).html(function() {
//I was thinking of putting the code here, but I don't know how to do it so it will work,
//except javascript, it needs to be put this html code <table id="detailTable"></table>
});
// return [
// ].join('');
}
//TABLE 2
var t2 = [{
"id": "1",
"shopping": "bike",
}, {
"id": "2",
"shopping": "car"
}];
$('#detailTable').bootstrapTable({
data: t2,
columns: [{
field: 'id',
title: 'id'
}, {
field: 'shopping',
title: 'Shopping detail'
}, {
field: 'status',
checkbox: true
}],
checkboxHeader: false
});
$('#detailTable').on('check.bs.table', function(e, row, $el) {
alert('check index: ' + row.shopping);
});
$('#detailTable').on('uncheck.bs.table', function(e, row, $el) {
alert('uncheck index: ' + row.shopping);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.min.js"></script>
<div class="container">
<p>TABLE 1</p>
<table id="summaryTable" data-detail-view="true">
<thead>
<tr>
<th data-field="id" data-align="center" data-width="20px">id</th>
<th data-field="name" data-align="center">Name</th>
</tr>
</thead>
</table>
<br>
<p>TABLE 2</p>
<table id="detailTable"></table>
</div>
这是我演示的链接:小提琴
有两个表。表 1 具有可扩展的行,我想将表 2 放入表 1 的每一行中。有一个名为 detailFormatter 的函数可以做到这一点,您可以在其中返回字符串或呈现元素(我正在玩它,但我无法让它工作)。对于这个演示,表 1 是用一些 html 代码创建的,表 2 只使用 javascript,但有这个启动div <table id="detailTable"></table>
(对我来说,哪种方式完成并不重要)。因此,问题是如何将表 2 放入表 1 中,并可以使用其事件(如选中或取消选中复选框),如 table2 的演示所示?稍后,我想onExpandRow
使用此事件,以便当用户展开表 1 的行时,它将从数据库中获取数据并填写表 2。
只需克隆您的detailTable
并将其放入每个row
中,detailFormatter
如下所示:
function detailFormatter(index, row, element) {
$(element).html($('#detailTable').clone(true));
}
现在,当您执行clone
时,将创建重复的id
,因此您只需通过更改其id
将其删除,如下所示:
function detailFormatter(index, row, element) {
$(element).html($('#detailTable').clone(true).attr('id',"tbl_"+row.id));
}
此外,您可以隐藏#detailTable
,因为您只是将其附加到另一个table
中,一旦隐藏它,您需要将show
添加到cloned tables
,因为所有属性都将复制到clone(true)
可以按如下方式完成:
function detailFormatter(index, row, element) {
$(element).html($('#detailTable').clone(true).attr('id',"tbl_"+row.id).show());
}
//.....
//.....
//.....
//At the end
$("#detailTable").hide();
完整的演示
我找到了另一种使用(部分)动态表创建将一个表嵌套到另一个表中的方法(参考我在使用 bootstrap-table 时发布的问题)。
var expandedRow = row.id;
$(element).html(
"<table id='detailTable"+expandedRow+"'><thead><tr><th data-field='id2' data-align='center' data-width='20px'>id2</th>" +
"<th data-field='shopping' data-align='center'>Shopping detail</th>" +
"<th data-field='status' data-checkbox='true'></th>" +
"</tr></thead></table>");
$('#detailTable'+expandedRow).bootstrapTable({
data: t2,
checkboxHeader: false
});
我认为这种方式更加独立。当时无需打开一个面板。事件和方法似乎工作正常。
完整代码在这里。
- 每行中都有一个嵌套表的数据表
- 如果“上一个”为空,则清除下一个嵌套的选择标记
- 如何将嵌套模型与骨干表单列表一起使用?我想用自定义模板制作一个嵌套模型
- MongoDB/Mongoose:MarkModified一个嵌套对象
- Ember路由从一个嵌套对象转换到另一个
- Jquery以查找最后一个嵌套元素
- 如何使用Angular js把一个嵌套对象放入数据库中?
- 如何选择一个嵌套在td、类名和id名中的输入?
- 编写一个嵌套的for循环
- JS搜索通过一个嵌套的JSON结构,深度增加随着时间的推移
- Angularjs,等待一个嵌套的承诺
- 如何使用ExtJS读取一个嵌套的json文件
- 访问一个嵌套在一个带有聚合物的对象中的数组中的一个对象的值
- 角:$范围.$watch一个嵌套的集合
- Jquery数据表:如何创建一个嵌套的表数据
- js:设置一个属性,它的值是一个嵌套对象
- 我有一个嵌套if的函数.我怎样才能做出'这个'指向构造函数.父
- 我如何使用lodash过滤一个嵌套的值数组对象
- 如何测试Javascript对象在最后一个嵌套层是否只有空对象?
- 从Javascript数组创建一个嵌套对象