概述
今天項目裏面要用到bootstrapTable裏面的Sub Table也就是我們說的父子表，之前也沒做過，so直接到官網找文檔，卡的不行，算了只能網上百度找了幾篇案例，也都是不全面。搞了一下午，終於有點效果。今天記錄一下，加深印象，也給像我一樣尋找案例的朋友一點思路。
環境：springboot+freemarker（jsp也是一樣做法）
先看一下官網的效果圖http://issues.wenzhixin.net.cn/bootstrap-table/#options/sub-table.html
本人最後效果
頁面是醜了點，解決了需求就好。
- 開始第一步在頁面中引入bootstrapTable的js和css文件
官方下載地址 - https://github.com/wenzhixin/bootstrap-table/archive/develop.zip
<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,
showColumns: true, // 開啓自定義列顯示功能
responseHandler: function responseHandler(sourceData) {
//這裏要做分頁，所以對返回的數據進行了處理
return {
"total": sourceData.total, // 總條數
"rows": sourceData.rows // 返回的數據列表（後臺返回一個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" >';
//遍歷子表數據
$.each(data.rows,
function(n, value) {
html += "<tr align='center'>"
+ "<td>" + value.id + "</td>"
+ "<td>" + value.name + "</td>"
+ "</tr>";
});
html += '</table>';
$detail.html(html); // 關鍵地方
}
});
},
});
});搞定，辦法是笨了點，效果還是實現了。歡迎大家有更好辦法的 交流交流！！