layui数据表格-复杂的表头

Posted 2023-03-01 加油，少年！

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了layui数据表格-复杂的表头相关的知识，希望对你有一定的参考价值。

知道layui数据表格的伙伴都知道，表头设计是非常的重要的，也影响着整个layui数据

表格的布局！但是表头也分等级，例如一级，二级，等等，又更多的等级区分，也表明

更加的细致，详细的布局成分，也可以清晰的发现的具体的成分，一个表头有多个部分

组成的，例如：地址：省，市，区，等等。计算单位：个，十，百，千，万 ......... 。

反正咱就是说，layui布局的表格也非常的重要对吧，让人更加的清晰的表明具体的成分。

话不多说，直接开始演示吧！

1.这就是所演示的二级头（如图所示）：

大家可以看见的是，一个地址可分解为省，市，区。由这三部分组成的。这就是二级头所表现出的具体详细的成分。

然后呢，下面则是演示的代码成分：

<table class="layui-table" lay-data="width:800, url:'/test/table/demo2.json2.js', page: true, limit: 6, limits:[6]">
  <thead>
    <tr>
      <th lay-data="checkbox:true, fixed:'left'" rowspan="2"></th>
      <th lay-data="field:'username', width:150" rowspan="2">联系人</th>
      <th lay-data="align:'center'" colspan="3">地址</th>
      <th lay-data="field:'amount', width:120" rowspan="2">金额</th>
      <th lay-data="fixed: 'right', width: 160, align: 'center', toolbar: '#barDemo'" rowspan="2">操作</th>
    </tr>
    <tr>
      <th lay-data="field:'province', width:120">省</th>
      <th lay-data="field:'city', width:120">市</th>
      <th lay-data="field:'zone', width:200">区</th>
    </tr>
  </thead>
</table>

但是大家也要注意，我所写的插件，记得要改成自己的插件才能使用否则就是错误的，因为我使用了我插件里面的数据，才能准确的表达出来，layui插件就是html布局的一种方式，当然大家也可以去其他的下载，或者说用自己所学所会的布局写出来，这些都是问题不大的，相信大家也是可以的，相信小编展现未来，一起加油！

2.更多的表头，也可展现出无限极的列表，贼拉优秀！

大家也可以看出地址是分：省，市，区，但是呢。也可以看出详细的部分，再次的充当表头的部分，分为街道，小区，还有单元，不难看出，你的等级越高，你所表示的详细就是越加的详细，当然还可以继续的增加等级区分，单元，也分楼层，房间等等对吧！

这是代码(如图所示吧)：

<table class="layui-table" lay-data="url:'../../test/table/demo2.json3.js', cellMinWidth: 80, page: true">
  <thead>
    <tr>
      <th lay-data="field:'username', width:80" rowspan="3">联系人</th>
      <th lay-data="field:'amount', width:120" rowspan="3">金额</th>
      <th lay-data="align:'center'" colspan="5">地址1</th>
      <th lay-data="align:'center'" colspan="2">地址2</th>
      <th lay-data="fixed: 'right', width: 160, align: 'center', toolbar: '#barDemo'" rowspan="3">操作</th>
    </tr>
    <tr>
      <th lay-data="field:'province'" rowspan="2">省</th>
      <th lay-data="field:'city'" rowspan="2">市</th>
      <th lay-data="align:'center'" colspan="3">详细</th>
      <th lay-data="field:'province'" rowspan="2">省</th>
      <th lay-data="field:'city'" rowspan="2">市</th>
    </tr>
    <tr>
      <th lay-data="field:'street'" rowspan="2">街道</th>
      <th lay-data="field:'address'">小区</th>
      <th lay-data="field:'house'">单元</th>
    </tr>
  </thead>
</table>

注意的话也不多说，插件是自己的

3 layui数据表格，不可缺少的一部分就是编写javascript代码表格

<script src="//res/layui/dist/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>
layui.use('table', function()
  var table = layui.table;
  
);
</script>