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。