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" class="table text-nowrap" 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 set-lan="html:">ID</label>‘,//不能加 rowspan: 1, JSON倒出錯誤
align: ‘center‘,
valign: ‘middle‘,
sortable: true, //是否排序
visible: false, //是否顯示
},
],
onExpandRow: function (index, row, $detail) {
var child_table = $detail.html(‘<table></table>‘).find(‘table‘);
ShowChildTable(row.ID, child_table)
}
});
//顯示子表(目前是顯示父表的部分內容,也可通過變更data傳入其他內容)
//顯示子表
function SearchChildTable(data, tableView) {
if (data != "") {
var Data = data;
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‘,
}
]
});
}
子表顯示的是重新查詢到的數據.
如果是把父表數據的一部分顯示到子表中,如何顯示?