bootstrap-Tablesub⽗⼦表的使⽤
概述
今天项⽬⾥⾯要⽤到bootstrapTable⾥⾯的Sub Table也就是我们说的⽗⼦表，之前也没做过，so直接到官⽹⽂档，卡的不⾏，算了只能⽹上百度了⼏篇案例，也都是不全⾯。搞了⼀下午，终于有点效果。今天记录⼀下，加深印象，也给像我⼀样寻案例的朋友⼀点思路。
环境：springboot+freemarker（jsp也是⼀样做法）
先看⼀下官⽹的效果图
本⼈最后效果
页⾯是丑了点，解决了需求就好。
开始第⼀步在页⾯中引⼊bootstrapTable的js和css⽂件
官⽅下载地址
<link href="${cp}plugins/bootstrap-table/bootstrap-table.css"rel="stylesheet"media="screen">
<script src="${cp}plugins/bootstrap-table/bootstrap-table.js"type="text/javascript"></script>
<script src="${cp}plugins/bootstrap-table/bootstrap-table-zh-CN.js"charset="UTF-8"type="text/javascript"></script>
准备好后，我们在页⾯定义⼀个
<table id="table"></table>
然后在js中初始化表格
我们知道bootstrapTable初始化有两种⽅式，⼀种是通过table 的data-url属性在后台查询，⼆是页⾯加载后通过js直接加载数据，我们在⽗表中采⽤第⼀种通过url从后台查询出列表数据，⼦表数据我们通过ajax同步获取数据后在通过第⼆种⽅式初始化⼦表。这⾥其实是有个坑，有个坑，有个坑 ，重要的事情说三遍，之前这⾥折腾了⼏个⼩时，看⽹上案例都是采⽤第⼀种⽅式去加载⽗表和⼦表，我不知道他们有没有测试过，反正我是⽆法加载出⼦表数据。也就是说⼦表的数据是获取到了，但是⽆法展⽰到页⾯⾥。了好久，最后怀疑是异步的原因，也就是说，bootstrapTable通过url获取数据后，没等数据加载，就把页⾯渲染了，最后我尝试先⽤ajax同步获取数据后，在初始化⼦表。⼦表⾥⾯数据就出来了。这可能真关系到加载顺序 ，这只是我个⼈结论，如果有另有⾼⼈知道这⼀原因，希望能及时指出。
下⾯我们在代码⾥⾛⼀遍吧
$(function() {
//先销毁表格，在初始化
$('#table').bootstrapTable('destroy').bootstrapTable({
columns: [{
checkbox: true
},
{
title: '列名⼀',
field: 'id',
align: 'center',
},
{
title: '列名⼆',
field: 'name',
align: 'center',
formatter: function(value, row, index) {
//处理格式化数据
}
},
},
{
title: '添加时间',
field: 'createDate',
align: 'center',
}],
url: "user/list/",      //请求数据的地址URL
method: 'post',  //请求⽅式(*)
striped: true,  //是否显⽰⾏间隔⾊
cache: false,  //是否使⽤缓存，默认为true，所以⼀般情况下需要设置⼀下这个属性(*)
pagination: true,  //是否显⽰分页(*)
sortable: true,  //是否启⽤排序
sortOrder: "desc", //排序⽅式
sidePagination: "server",  //分页⽅式：client客户端分页，server服务端分页(*)
pageNumber: 1, //初始化加载第⼀页，默认第⼀页
pageSize: 10,  //每页的记录⾏数(*)
pageList: [20, 50, 100],  //可供选择的每页的⾏数(*)
showColumns: false,  //是否显⽰所有的列
showRefresh: false,  //是否显⽰刷新按钮
minimumCountColumns: 2,  //最少允许的列数
clickToSelect: true,  //是否启⽤点击选中⾏
height: 800,
detailView: true,  //是否显⽰⽗⼦表    *关键位置*
queryParamsType: "limit",
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
checkboxHeader: true,
search: false,
singleSelect: true,
striped: true,
bootstrap项目showColumns: true,  // 开启⾃定义列显⽰功能
responseHandler: function responseHandler(sourceData) {
//这⾥要做分页，所以对返回的数据进⾏了处理
return {
"total": al,  // 总条数
"rows": ws // 返回的数据列表（后台返回⼀个list集合）
};
},
queryParams: function queryParams(params) {
//设置查询参数，就是把页⾯需要查询的字段通过jquery取值后传到后台
var param = {
id: $("input[name='id']").val(),
name: $("input[name='name']").val(),
pageSize: params.limit, // 页⾯⼤⼩
pageNumber: (params.offset)/10+1// 页码
};
return param;
},
//注册加载⼦表的事件。你可以理解为点击⽗表中+号时触发的事件
onExpandRow: function(index, row, $detail) {
//这⼀步就是相当于在当前点击列下新创建⼀个table
var cur_table = $detail.html('<table></table>').find('table');
var html = "";
html += "<table class='table'>";
html += "<thead>";
html += "<tr style='height: 40px;'>";
html += "<th>⽤户id</th>";
html += "<th>⽤户姓名</th>";
html += "</tr>";
html += "</thead>";
$.ajax({
type: "post",
url: "user/list",      //⼦表请求的地址
data: {id:row.id,name:row.name},//我这⾥是点击⽗表后，传递⽗表列id和nama到后台查询⼦表数据                async: false,          //很重要，这⾥要使⽤同步请求
success: function(data) {
html += '<ul class="list-group" >';
html += '<ul class="list-group" >';
//遍历⼦表数据
$.ws,
function(n, value) {
html += "<tr  align='center'>"
+ "<td>" + value.id + "</td>"
+ "<td>" + value.name + "</td>"
+ "</tr>";
});
html += '</table>';
$detail.html(html); // 关键地⽅
}
});
},
});
});
搞定，办法是笨了点，效果还是实现了。欢迎⼤家有更好办法的 交流交流！！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。