layui js 動態加載數據 復雜表頭多表頭實例

 layui官方文檔對於多表頭的描述是靜態的數據渲染的，一開始困擾了半天，查了很多資料，終於找到了解決辦法，在這里分享給大家，希望能幫助到你！

1、先來看看layui的官方文檔

更多級表頭（可以無限極）：
<table class="layui-table" lay-data="{url:'/test/table/demo2.json?v=3', cellMinWidth: 80, page: true}">
  <thead>
    <tr>
      <th lay-data="{field:'username', width:80}" rowspan="3">聯系人</th>
      <th lay-data="{field:'amount', width:120}" rowspan="3">金額</th>
      <th lay-data="{align:'center'}" colspan="5">地址1</th>
      <th lay-data="{align:'center'}" colspan="2">地址2</th>
      <th lay-data="{fixed: 'right', width: 160, align: 'center', toolbar: '#barDemo'}" rowspan="3">操作</th>
    </tr>
    <tr>
      <th lay-data="{field:'province'}" rowspan="2">省</th>
      <th lay-data="{field:'city'}" rowspan="2">市</th>
      <th lay-data="{align:'center'}" colspan="3">詳細</th>
      <th lay-data="{field:'province'}" rowspan="2">省</th>
      <th lay-data="{field:'city'}" rowspan="2">市</th>
    </tr>
    <tr>
      <th lay-data="{field:'street'}" rowspan="2">街道</th>
      <th lay-data="{field:'address'}">小區</th>
      <th lay-data="{field:'house'}">單元</th>
    </tr>
  </thead>
</table>

       官方文檔都是靜態渲染，對應效果如下：

2、再看看我的問題和解決方案

      但是大多數情況都是js動態加載的數據,如下：

<script>
layui.use('table', function(){
  var table = layui.table;
  
 var options = { 
        id: 'id', 
        method: 'GET',
        elem: '#id', //指定原始表格元素選擇器（推薦id）
        url: '../../, 
        request: {
            pageName: 'currentPage',   // 頁碼的參數名稱，默認：page
            limitName: 'pageSize'  // 每頁數據量的參數名，默認：limit
        },  
        limit: 10,
        limits: [10, 15, 30],
        page: true,
     cols: [[  
      {field: 'id', title: 'ID', width: 80, sort: true}
      ,{field: 'username', title: '用戶名', width: 120}
      ,{field: 'email', title: '郵箱', minWidth: 150}
      ,{field: 'sign', title: '簽名', minWidth: 160}
      ,{field: 'sex', title: '性別', width: 80}
      ,{field: 'city', title: '城市', width: 100}
      ,{field: 'experience', title: '積分', width: 80, sort: true}
    ]] 
});
</script>

　  我開始的處理方案如下：

<script type="text/javascript">
    $(document).ready(function(){
        var ht_tr ="<tr><td colspan=\"4\"><div class=\"layui-table-cell laytable-cell-1-0-0\" align=\"left\"><span>XIAOMI</span></div></td>"+
                   "<td colspan=\"4\"><div class=\"layui-table-cell laytable-cell-1-0-0\" align=\"left\"><span>IPHONE</span></div></td></tr>";
        setTimeout(function(){ 
            $(".layui-table-header").next().next().append(ht_tr); 
        },500);
    });
</script>

　　在HTML頁面中，計划着在動態記在數據后，動態延遲加載，添加新的一行數據作為表頭，后來發現這種方法行不通，頁面沒有渲染出來！

3、解決方案如下

配置代碼如下：

     rowspan：跨行   colspan：跨列

cols: [
    ／／一級表頭
    [
        { rowspan: 2, title: '聯系人', field: 'person'},
        { rowspan: 2, title: '地址', colspan: 3},
        { rowspan: 2, title: '操作', field: 'option'}
    ],
    ／／二級表頭
    [
        { title: '省', field: 'provence'},
        { title: '市', field: 'city'},
        { title: '區', field: 'area'}
    ]
],

　　如上代碼所示，在LayUI中使用方法渲染復雜表頭時，將各級表頭分別放在一個數組中，且按照放置的順序來判斷其級別（一級第一個，二級第二個等等），一般來說，有幾級深度的表頭，那么在第一級中無子級的就需要有相應的rowspan，有子級的，就要有相應的colspan。