layui合并表头合并列合并

探索途中的码农

于 2024-09-08 21:33:44 发布

阅读量270

点赞数 4

分类专栏：前端文章标签： layui 前端 javascript

本文链接：https://blog.csdn.net/weixin_48922293/article/details/142032761

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

最近遇到一个需求，需要将layui框架渲染出的table表格的表头指定列进行合并，网上查了不少资料都是有两行表头甚至更多行表头的一些列合并，和我的需求不符，我的需求是只有一行表头行，然后需要将该表头的指定两列合并。

1. 附上代码和效果图

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>layui表头合并demo</title>
    <link href="//unpkg.com/layui@2.9.16/dist/css/layui.css" rel="stylesheet" />
  </head>
  <body class="layui-padding-3">
    <table class="layui-hide" id="ID-table-demo-templet"></table>
    <script src="//unpkg.com/layui@2.9.16/dist/layui.js"></script>
    <script>
      layui.use(['table'], function () {
        var table = layui.table;
        var form = layui.form;
        table.render({
          elem: '#ID-table-demo-templet',
          url: 'https://unpkg.com/outeres@0.1.3/json/2/table/user.json',
          page: true,
          height: '315px',
          cols: [
            [
              { field: 'id', fixed: 'left', width: 80, title: 'ID' },
              {
                field: 'username',
                width: 80,
                title: '用户',
                templet: '#ID-table-demo-templet-user',
              },
              {
                field: 'sex',
                width: 60,
                title: '性别',
                templet: function (d) {
                  if (d.sex === '男') {
                    return '<span style="color: blue">♂</span>';
                  } else {
                    return '<span style="color: pink">♀</span>';
                  }
                },
              },
              {
                field: 'city',
                width: 115,
                title: '城市',
                templet:
                  '<div><i class="layui-icon layui-icon-location"></i> {{= d.city }}</div>',
              },
            ],
          ],
          done: function (res, cur, count) {
            console.log('res', res);
          },
        });
      });
    </script>
  </body>
</html>

2. 需求是将用户和性别列表头进行合并，数据列不合并

按f12打开开发调试者工具查看页面元素发现该table所在的dom位置

3. 代码改造如下 table.render中增加回调函数done

        done: function (res, cur, count) {
            var parentElement = document.querySelector(
              '[lay-table-id="ID-table-demo-templet"]'
            );
            var childElementBoxs =
              parentElement.querySelector('.layui-table-box');
            var childElementHeaders = childElementBoxs.querySelector(
              '.layui-table-header'
            );
            var childElementHeaderThs = childElementBoxs.querySelectorAll('th');
            // 指定列合并
            childElementHeaderThs[1].colSpan = 2;
            childElementHeaderThs[1].textContent = '';
            var div = document.createElement('div');
            div.className = 'layui-table-cell laytable-cell-my';
            var span = document.createElement('span');
            span.textContent = '用户性别';
            div.appendChild(span);
            childElementHeaderThs[1].appendChild(div);
            childElementHeaderThs[2].style.display = 'none';
            console.log('res', childElementHeaderThs);
          }

4. 完整代码改造如下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>layui表头合并demo</title>
    <link href="//unpkg.com/layui@2.9.16/dist/css/layui.css" rel="stylesheet" />
    <style>
      .laytable-cell-my{ width: 141px; text-align：center; }
    </style>
  </head>
  <body class="layui-padding-3">
    <table class="layui-hide" id="ID-table-demo-templet"></table>
    <script src="//unpkg.com/layui@2.9.16/dist/layui.js"></script>
    <script>
      layui.use(['table'], function () {
        var table = layui.table;
        var form = layui.form;
        table.render({
          elem: '#ID-table-demo-templet',
          url: 'https://unpkg.com/outeres@0.1.3/json/2/table/user.json',
          page: true,
          height: '315px',
          cols: [
            [
              { field: 'id', fixed: 'left', width: 80, title: 'ID' },
              {
                field: 'username',
                width: 80,
                title: '用户',
                templet: '#ID-table-demo-templet-user',
              },
              {
                field: 'sex',
                width: 60,
                title: '性别',
                templet: function (d) {
                  if (d.sex === '男') {
                    return '<span style="color: blue">♂</span>';
                  } else {
                    return '<span style="color: pink">♀</span>';
                  }
                },
              },
              {
                field: 'city',
                width: 115,
                title: '城市',
                templet:
                  '<div><i class="layui-icon layui-icon-location"></i> {{= d.city }}</div>',
              },
            ],
          ],
          done: function (res, cur, count) {
            var parentElement = document.querySelector(
              '[lay-table-id="ID-table-demo-templet"]'
            );
            var childElementBoxs =
              parentElement.querySelector('.layui-table-box');
            var childElementHeaders = childElementBoxs.querySelector(
              '.layui-table-header'
            );
            var childElementHeaderThs = childElementBoxs.querySelectorAll('th');
            // 指定列合并
            childElementHeaderThs[1].colSpan = 2;
            childElementHeaderThs[1].textContent = '';
            var div = document.createElement('div');
            div.className = 'layui-table-cell laytable-cell-my';
            var span = document.createElement('span');
            span.textContent = '用户性别';
            div.appendChild(span);
            childElementHeaderThs[1].appendChild(div);
            childElementHeaderThs[2].style.display = 'none';
            console.log('res', childElementHeaderThs);
          },
        });
      });
    </script>
  </body>
</html>

效果如下