Bootstrap使⽤⽗⼦表 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"  ></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 = {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,                    //是否显⽰详细视图
bootstrap 5detailView: false,
dataType: "json",//期待返回数据类型
buttonsAlign: "left",//按钮对齐⽅式
toolbarAlign: "left",//⼯具栏对齐⽅式
columns: [
{
field: 'filed',
title: '<label>name</label>',
align: 'center',
valign: 'middle',
}
]
});
}
⼦表有沒有其他顯⽰⽅法或者形式?

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