layui创建二级表头和之下的表格

layui是一个轻量级的前端UI库，它提供了一种简单易用的方式来创建动态布局，包括表格。要创建二级表头和嵌套表格，你可以利用layui的table组件以及它的数据处理能力。这里是一个简单的步骤：

1. 引入layui库：

<link rel="stylesheet" href="https://unpkg.com/layui@2.6.7/dist/layui.css">
<script src="https://unpkg.com/layui@2.6.7/dist/layui.js"></script>

2. 创建HTML结构，包含主表头和二级表头：

<table id="demo" lay-filter="demo">
    <thead>
        <tr>
            <!-- 主表头 -->
            <th>一级表头</th>
            <th><button lay-data="{type: 'child', title: '展开二级表头'}">展开</button></th>
        </tr>
        <!-- 初始时隐藏的二级表头行 -->
        <tr class="layui-hide">
            <th>二级表头列1</th>
            <th>二级表头列2</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

3. 使用JavaScript初始化表格，并监听按钮事件来显示或隐藏二级表头：

layui.use('layer', function() {
    var layer = layui.layer;
    // 初始化table插件
    layui.table.render({
        elem: '#demo',
        data: [], // 填充实际的数据
        columns: [
            { field: '一级字段', title: '一级表头' },
            { field: '', title: '展开/收起', events: {'click .lay-collapse': toggleChild} }
        ],
        // 动态加载二级表头，隐藏初始状态
        onCellShow: function(index, row) {
            if (row.type === 'child') {
                $('.layui-hide').show();
            } else {
                $('.layui-hide').hide();
            }
        },
        onCellHide: function(index, row) {
            // 可选，隐藏时做额外操作
        }
    });
    
    function toggleChild(data) {
        var tr = $(data.cell).parent().prev(); // 获取上一行也就是二级表头
        if (tr.is('.layui-hide')) {
            tr.show();
        } else {
            tr.hide();
        }
    }
});