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"  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, //是否顯示
　　　　},{

　　　　　　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,                    //是否顯示詳細視圖
        detailView: false,
        dataType: "json",//期待返回數據類型
        buttonsAlign: "left",//按鈕對齊方式
        toolbarAlign: "left",//工具欄對齊方式        
        columns: [
          {
            field: 'filed',
            title: '<label>name</label>',
            align: 'center',
            valign: 'middle',
          }
        ]
      });
    }

　　

子表有沒有其餘顯示方法或者形式?