layui 父子页面 数据表格

在 layui 中使用数据表格实现父子页面的方式如下：

1.在父页面中，定义一个数据表格并加载数据，使用 layui.table.render() 方法实现：

layui.use('table', function(){
  var table = layui.table;

  table.render({
    elem: '#table',
    url: 'data.json', //数据接口
    page: true, //开启分页
    cols: [[ //表头
      {field: 'id', title: 'ID', width:80},
      {field: 'name', title: '用户名', width:120},
      {field: 'sex', title: '性别', width:80},
      {field: 'city', title: '城市', width:150},
      {field: 'sign', title: '签名', width:200},
      {field: 'experience', title: '积分', width:80},
      {field: 'score', title: '评分', width:80},
      {field: 'classify', title: '职业', width:120},
      {field: 'wealth', title: '财富', width:120}
    ]]
  });
});

2.给数据表格的每一行添加一个事件监听，该事件监听在用户点击某一行时执行，使用 layui.table.on() 方法实现：

table.on('row(table)', function(obj){
  var rowData = obj.data;
  var tr = obj.tr;
  
  //获取当前行数据，并展示子页面
  showChildPage(rowData.id);    
});

3.在父页面中实现一个函数，用于展示子页面，该函数将子页面加载到一个模态框中并打开模态框，通过模态框展示子页面内容：

function showChildPage(userId){
  layui.use(['layer', 'table'], function(){
    var layer = layui.layer;
    var table = layui.table;

    layer.open({
      type: 1,
      title: '子页面',
      area: ['700px', '500px'],
      content: $('#childPage'),
      success: function(layero, index){
        // 在模态框中加载数据表格和数据
        table.render({
          elem: '#childTable',
          url: 'child_data.json',
          where: {
            userId: userId
          },
          page: true,
          cols: [[
            {field: 'id', title: 'ID', width:80},
            {field: 'title', title: '标题', width:400},
            {field: 'content', title: '内容', width:200}
          ]]
        });
      }
    });
  });
}

4.在父页面中添加一个模态框用于展示子页面内容，并在该模态框中添加一个数据表格用于展示子页面数据：

<!-- 定义模态框 -->
<div id="childPage" style="display:none;">
  <table id="childTable" lay-filter="childTable"></table>
</div>

5.在子页面中，需要根据传入的用户 ID 加载相应的数据。按照步骤 2 和 3，在子页面中添加一条类似于以下的代码实现：

//获取 URL 中的参数值
function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, '\\$&');
    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

var userId = getParameterByName('userId');

layui.use(['layer', 'table'], function(){
    var table = layui.table;
    
    table.render({
        elem: '#table',
        url: 'data.json',
        where: {
            userId: userId
        },
        page: true,
        cols: [[
            {field: 'id', title: 'ID', width:80},
            {field: 'title', title: '标题', width:400},
            {field: 'content', title: '内容', width:200}
        ]]
    });
});

以上就是使用 layui 实现父子页面数据表格的方法。这种实现方式比较通用，在实际项目中也可以根据需要进行一些改进和调整。