文章介绍了如何利用Bootstrap和JavaScript实现一个带有详细视图功能的表格，包括模态框展示、父子表结构和数据动态加载。主要展示了HTML、CSS和JavaScript代码片段，以及BootstrapTable组件的配置和事件处理。
目录
1、案例图：
1-1、展开父表的子表图：
1-2、在父表的每一行的最前面显示一个加号，点开就是子表信息
2、代码部分
2-1HTML、
<!-- 模态框 -->
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
id="seatModal">
<div class="modal-dialog seatFrame modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<div style="display: flex;justify-content: space-between;">
<h2 class="modal-title" id="myModalLabel">考场信息</h2>
<div class="input-group">
<span class="input-group-addon">考试场次<span id="seatInformationNo"></span></span>
</div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
</div>
<div class="modal-body">
<table id="trainingInformation" class="table table-striped table-hover" style="margin-top: 0px;">
<tbody id="seatTable">
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" id="sava-edit-btn">保存</button>
</div>
</div>
</div>
</div>2-2、js部分
$("#seatButton").click(function () {
debugger
// 获取所有场次的考试列表
let roomIndex = $("#seatSession").val()
let roomData = Zax.roomData[roomIndex];
$('#seatInformationNo').text(roomData.name)
let selectedRoom = RoomDiv.selectedRoom
let exams = Zax.roomData[selectedRoom].exams
let users=RoomDiv.roomArray[selectedRoom]
exams.filter(exam=>{
let userArray=users.filter(user=>user.zaxExamId==exam.zaxExamId)
exam.userArray=userArray
console.log(exam.userArray);
})
$('#seatModal').modal();
$('#trainingInformation').bootstrapTable('removeAll'); //清空表的数据
$('#trainingInformation').bootstrapTable('append', exams); //添加新的表数据
$('#trainingInformation').bootstrapTable({
data: exams,
sortable: false,
//search: true,
pagination: true, //开启分页
pageNumber: 1, //初始化加载第一页，默认第一页
queryParamsType: 'limit', //查询参数组织方式
pageSize: 10, //单页记录数
pageList: [5, 10, 20, 30], //分页步进值
toolbar: "#toolboxPlatfrom",
singleSelect: false, //只选择一行
maintainSelected: true, //开启分页保持选择状态，就是用户点击下一页再次返回上一页
clickToSelect: true,
showSearch: false,
showRefresh: false,
showToggle: false,
showColumns: false,
classes: "table table-striped table-hover ", //这里设置表格样式
detailView: true,
columns:
[
{
checkbox: true
},
{ field: 'zaxExamId', title: 'ID' },
{ field: 'name', title: '考试名称' },
{ field: 'subject', title: '科目' },
{ field: 'personType', title: '人员类型' },
{ field: 'timeStart', title: '开考时间' },
{ field: 'timeEnd', title: '结束时间' },
{ field: 'userArray.length', title:'当前人数'}
],
//注册加载子表的事件
onExpandRow: function (index, row, $detail) {
//点击左侧的加号 展开查看详情的时候调用（加载子菜单） 在这里做了递归调用自身再次构建一张表 这里的child-table-row.id是为了修改或者删除，刷新子表使用
createSubTable(index, row, $detail);
},
//加载成功之后执行
onLoadSuccess: function (data) {
}
});
})
//加载子菜单列表
createSubTable = function (index, row, $detail) {
debugger
var parentId = row.menuId;
let childData = row.userArray
var childTable = $detail.html('<table></table>').find('table');
$(childTable).bootstrapTable({
data:childData,
classes: 'table table-hover table-striped',
sortable: false,
//search: true,
pagination: true, //开启分页
pageNumber: 1, //初始化加载第一页，默认第一页
queryParamsType: 'limit', //查询参数组织方式
pageSize: 10, //单页记录数
pageList: [5, 10, 20, 30], //分页步进值
toolbar: "#toolboxPlatfrom",
singleSelect: false, //只选择一行
maintainSelected: true, //开启分页保持选择状态，就是用户点击下一页再次返回上一页
clickToSelect: true,
showSearch: false,
showRefresh: false,
showToggle: false,
showColumns: false,
detailView: false,
columns: [
{
checkbox: true
},
{ field: 'zaxExamId', title: 'ID' },
{ field: 'name', title: '姓名' },
{ field: 'subject', title: '科目' },
{ field: 'personType', title: '人员类型' },
{ field: 'seatNo', title: '座位' },
],
})
};
$('#seatModal').modal('hide');
2-3、css部分可以自己随意发挥
3、对JavaScript部分讲解
3-1、对表中的部分进行解释：
"classes": "定义Bootstrap样式。'table'表示表格，'table-hover'使得鼠标悬停在表格行上时会有浅灰色背景，'table-striped'使得表格的奇数行和偶数行有不同的背景颜色。",
"sortable": "是否允许表格内容排序。在此设为'false'，表示不允许。",
"pagination": "是否开启分页。这里设为'true'，表示开启。",
"pageNumber": "初始化加载的页码。这里设为'1'，表示默认加载第一页。",
"queryParamsType": "查询参数的组织方式。这里设为'limit'，表示使用'limit'方式组织查询参数。",
"pageSize": "单页显示的记录数量。这里设为'10'，表示每页显示10条记录。",
"pageList": "分页的步进值，即用户可以选择的分页大小列表。这里设为[5, 10, 20, 30]，表示用户可以选择每页5、10、20或30条记录。",
"toolbar": "定义工具栏的HTML元素。这里设为'#toolboxPlatfrom'，表示工具栏的HTML元素是id为'toolboxPlatfrom'的元素。",
"singleSelect": "是否只允许选择一行。这里设为'false'，表示不允许（可以多选）。",
"maintainSelected": "是否在分页时保持已选择的行。这里设为'true'，表示保持选择状态。",
"clickToSelect": "是否允许点击行来选择。这里设为'true'，表示允许。",
"showSearch": "是否显示搜索框。这里设为'false'，表示不显示。",
"showRefresh": "是否显示刷新按钮。这里设为'false'，表示不显示。",
"showToggle": "是否显示切换显示/隐藏列的按钮。这里设为'false'，表示不显示。",
"showColumns": "是否显示列选择框。这里设为'false'，表示不显示。",
"detailView": "是否显示详情折叠(开启父子表)，会在每一行的最前面显示一个加号。"3-2、在要增加了一个新表的时候，直接清空表的数据，添加新数据就使用sppend就行了，清空数据使用removeAll方法。对比使用create方法的话，removeAll比create方法性能优化方面强很多，不建议使用create方法创建表。
3-3、对于父表的数据生成了要增加子表的方法是：
detailView: true, //是否显示详情折叠(开启父子表)，会在每一行的最前面显示一个加号
//注册加载子表的事件
onExpandRow: function (index, row, $detail) {
//点击左侧的加号 展开查看详情的时候调用（加载子菜单） 在这里做了递归调用自身再次构建一张表 这里的child-table-row.id是为了修改或者删除，刷新子表使用
createSubTable(index, row, $detail);
},
//加载成功之后执行
onLoadSuccess: function (data) {
}
这两行代码不能少，这样就在父表下创建了子表，子表的数据就是row，index，$detail，对应着子表可以去取数据。
参考地址：
扫一扫
832
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
