layui主從架構範本

Layui是一个非常流行的前端UI框架，提供了很多组件和模板，方便开发者快速构建页面。而主从架构模板则是一种常用的页面布局方式，用于展示主列表和从列表之间的关联数据。下面是一个简单的layui主从架构模板实现：

1. 页面布局

<div class="layui-row">
  <div class="layui-col-md8">
    <!-- 主列表 -->
    <table class="layui-table" lay-data="{id:'mainTable', url:'./data/main.json', page:true, limit:20, height: 'full-120'}" lay-filter="mainTable">
      <thead>
        <tr>
          <th lay-data="{field:'id', sort:true}">ID</th>
          <th lay-data="{field:'name'}">名称</th>
          <th lay-data="{field:'desc'}">描述</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </div>
  <div class="layui-col-md4">
    <!-- 从列表 -->
    <table class="layui-table" lay-data="{id:'subTable', url:'./data/sub.json', page:true, limit:10, height: 'full-120'}" lay-filter="subTable">
      <thead>
        <tr>
          <th lay-data="{field:'id', sort:true}">ID</th>
          <th lay-data="{field:'name'}">名称</th>
          <th lay-data="{field:'desc'}">描述</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </div>
</div>

2. 数据交互

通过以上代码，我们已经完成了主从架构的布局，接下来需要实现数据交互。在Layui中，我们可以通过`lay-data`属性来设置表格的数据源。例如，在上述代码中，我们设置了主表格和从表格的数据源分别为`./data/main.json`和`./data/sub.json`。在实际开发中，我们可以通过AJAX等方式获取后台数据并渲染表格。

3. 事件处理

最后，我们还需要处理表格的一些事件，例如点击表格行时，从表格应该展示对应的从列表数据。在Layui中，我们可以使用`table.on('row(mainTable)', function(obj){...})`方法来绑定表格行的点击事件。在事件处理函数中，我们可以获取当前行的数据，并通过AJAX请求获取对应的从列表数据并重新渲染从表格。