layui js 动态加载数据 复杂表头多表头实例

 layui官方文档对于多表头的描述是静态的数据渲染的，一开始困扰了半天，查了很多资料，终于找到了解决办法，在这里分享给大家，希望能帮助到你！

1、先来看看layui的官方文档

更多级表头（可以无限极）：<table class="layui-table" lay-data="{url:'/test/table/demo2.json?v=3', cellMinWidth: 80, page: true}"><th lay-data="{field:'username', width:80}" rowspan="3">联系人<th lay-data="{field:'amount', width:120}" rowspan="3">金额<th lay-data="{align:'center'}" colspan="5">地址1<th lay-data="{align:'center'}" colspan="2">地址2<th lay-data="{fixed: 'right', width: 160, align: 'center', toolbar: '#barDemo'}" rowspan="3">操作<th lay-data="{field:'province'}" rowspan="2">省<th lay-data="{field:'city'}" rowspan="2">市<th lay-data="{align:'center'}" colspan="3">详细<th lay-data="{field:'province'}" rowspan="2">省<th lay-data="{field:'city'}" rowspan="2">市<th lay-data="{field:'street'}" rowspan="2">街道<th lay-data="{field:'address'}">小区<th lay-data="{field:'house'}">单元

       官方文档都是静态渲染，对应效果如下：

2、再看看我的问题和解决方案

      但是大多数情况都是js动态加载的数据,如下：

　  我开始的处理方案如下：

XIAOMI"+
                   "IPHONE";
        setTimeout(function(){ 
            $(".layui-table-header").next().next().append(ht_tr);         },500);
    });" _ue_custom_node_="true">

　　在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。