Bootstrap使用父子表:
css(可忽略):
table, td, th {
margin: 0;
padding: 0;
vertical-align: middle;
text-align: left;
font-size: 12px;
border-color: #f2ecec !important;
}
#table thead th {//父表表頭
font-size: 14px;
font-weight: bold;
line-height: 19px;
padding: 0 8px 2px;
text-align: center;
background: #375A7F !important;
color: white;
}
#child_table thead th {//子表表頭
font-size: 14px;
font-weight: bold;
line-height: 19px;
padding: 0 8px 2px;
text-align: center;
background: #375A7F !important;
color: white;
}
html:
white-space:nowrap;所有文本顯示在這一行
text-overflow:ellipsis;多餘文本省略號顯示
<div id="page-content-wrapper"> <table id="tableList" style="white-space:nowrap;text-overflow:ellipsis"></table> </div>
JS:$('#table').bootstrapTable({
data: [],//Data
striped: true, //是否顯示行間隔色
cache: false, //是否使用快取，默認為true，所以一般情況下需要設定一下這個屬性（*）
sortable: true, //是否啟用排序
sortOrder: "asc", //排序方式
pagination: true, //是否顯示分頁（*）
sidePagination: "client", //分頁方式：client客戶端分頁，server服務端分頁（*）
pageNumber: 1, //初始化加載第一頁，默認第一頁
pageSize: 10, //每頁的記錄行數（*）
pageList: [10, 20, 50], //可供選擇的每頁的行數（*）
showColumns: true, //是否顯示 內容列下拉框
showRefresh: true, //是否顯示重繪按鈕
minimumCountColumns: 2, //最少允許的列數
clickToSelect: true, //是否啟用點擊選中行
singleSelect: true, //單選checkbox
showToggle: false, //是否顯示詳細視圖和串列視圖的切換按鈕
cardView: false, //是否顯示詳細視圖
detailView: true, //是否顯示父子表
search: false, //是否顯示表格搜索，此搜索是客戶端搜索，不會進服務端，
strictSearch: false, //設定為 true啟用 全匹配搜索，否則為模糊搜索
searchOnEnterKey: true, //回車搜索
searchTimeOut: 500, //設定搜索超時時間
trimOnSearch: true, //設定為 true 將允許空字符搜索
searchAlign: "right", //查詢框對齊方式
toolbar: "#tableToolbar", //指定工具列
showExport: true, //是否顯示匯出按鈕
Icons: 'glyphicon-export',//這一行是幹嘛來著
exportOptions: {
ignoreColumn: [0], //忽略某一列的索引
fileName: 'name list', //檔案名稱設定
worksheetName: 'sheet1', //表格作業區名稱
},
locale: tableLocale,
columns: [
{
checkbox: true
}, {
field: 'ID',
title: '<label>ID</label>',
align: 'center',
valign: 'middle',
sortable: true, //是否排序
visible: false, //是否顯示
},{
field: 'filed',
title: '<label set-lan="html:">filed</label>',//不能加 rowspan: 1, JSON倒出錯誤
align: 'center',
valign: 'middle',
sortable: true, //是否排序
visible: false, //是否顯示
},
onExpandRow: function (index, row, $detail) {
ShowChildTable(row.ID, $detail);//子表顯示的是重新查詢到的數據.
//ShowChildTable(tableView, [row]);子表顯示的是父表數據的一部分.
} });
//顯示子表(目前是顯示父表的部分內容,也可通過變更data傳入其他內容)
//顯示子表
function SearchChildTable(id, tableView) {
if (data != "") {
var Data = https://www.cnblogs.com/lixiaa/p/{ID:id};
var strData = JSON.stringify(Data);
$.ajax({
type:"POST",
async: true,
url: url,
contentType: 'application/json;charset="utf-8" ',
data: strData,
success: function (e) {
if (e.Status == "0") {
if (e.Data.length > 0) {
ShowChildTable(tableView,e.Data);
}
else {
ShowChildTable(tableView, []);
}
}
},
statusCode: {
403: function (response) {
swal({
title: "",
text: e.Message,
type: 'warning',
timer: 2000,
showConfirmButton: false
});
}
}
});
}
}
function ShowChildTable(tableView, data) {
var child_table = tableView.html('<table id="child_table" ></table>').find('table');
$(child_table).bootstrapTable({
data: data,
striped: false, //是否顯示行間隔色
cache: false, //是否使用快取，默認為true
pagination: false, //是否顯示分頁（*）
sortable: false, //是否啟用排序
sortOrder: "asc", //排序方式
sidePagination: "client",
pageNumber: 1, //初始化加載第一頁，默認第一頁
pageSize: 10, //每頁的記錄行數（*）
pageList: [5, 10, 50], //可供選擇的每頁的行數（*）
search: false,
strictSearch: false,
searchOnEnterKey: true, //回車搜索
showColumns: false,
showRefresh: false, //是否顯示重繪按鈕
minimumCountColumns: 2, //最少允許的列數
clickToSelect: true, //是否啟用點擊選中行
singleSelect: false,
showToggle: false, //是否顯示詳細視圖和串列視圖的切換按鈕
cardView: false, //是否顯示詳細視圖
detailView: false,
dataType: "json",//期待回傳資料型別
buttonsAlign: "left",//按鈕對齊方式
toolbarAlign: "left",//工具列對齊方式
columns: [
{
field: 'filed',
title: '<label>name</label>',
align: 'center',
valign: 'middle',
}
]
});
}
子表有沒有其他顯示方法或者形式?
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/308383.html
標籤：HTML5
下一篇：200套HTML期末學生結課大作業作品-web前端期末大作業 html+css+javascript網頁設計實體 企業網站制作- 學生dreamweaver網頁設計作業成品