layui 表格嵌套表格

Layui 是一个采用模块化构建方式的前端 UI 框架，它提供了丰富的组件来简化网页的开发过程。其中，Layui 的表格组件是其核心功能之一，支持数据的展示和操作，并且可以实现表格的嵌套。

基础概念

表格嵌套是指在一个表格的单元格中再嵌入另一个表格，用于展示更加复杂的数据结构。这种嵌套可以是多层的，使得数据的层次感和关联性更加清晰。

类型与应用场景

一对一嵌套：适用于展示具有明确父子关系的数据。
一对多嵌套：适用于一个父项对应多个子项的场景，如订单详情中包含多个商品信息。
多对多嵌套：适用于关系更为复杂的数据结构，如组织架构中部门与员工的关系。

示例代码

以下是一个简单的 Layui 表格嵌套表格的示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Layui 嵌套表格示例</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@2.6.8/dist/css/layui.css">
</head>
<body>

<table class="layui-hide" id="demo" lay-filter="test"></table>

<script src="https://cdn.jsdelivr.net/npm/layui@2.6.8/dist/layui.js"></script>
<script>
layui.use(['table'], function(){
  var table = layui.table;
  
  // 渲染主表格
  table.render({
    elem: '#demo',
    url:'/demo/table/user/', // 数据接口
    page: true, // 开启分页
    cols: [[ // 表头
      {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'},
      {field: 'username', title: '用户名', width:120},
      {field: 'sex', title: '性别', width:80, sort: true},
      {field: 'city', title: '城市', width:100},
      {field: 'sign', title: '签名', width:200},
      {field: 'experience', title: '积分', width:100, sort: true},
      {field: 'score', title: '评分', width:100, sort: true},
      {field: 'classify', title: '职业', width:100},
      {field: 'wealth', title: '财富', width:135, sort: true},
      {fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
    ]]
  });
  
  // 监听工具条
  table.on('tool(test)', function(obj){
    var data = obj.data;
    if(obj.event === 'detail'){
      layer.open({
        type: 1,
        title: '详细信息',
        area: ['500px', '400px'],
        content: '<table class="layui-table"><thead><tr><th>ID</th><th>姓名</th></tr></thead><tbody><tr><td>'+ data.id +'</td><td>'+ data.username +'</td></tr></tbody></table>'
      });
    }
  });
});
</script>

</body>
</html>