layui合并table相同内的行分组合并无插件纯js

原创已于 2026-04-17 18:02:41 修改 · 1.1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#layui #前端 #javascript

于 2024-11-18 17:40:19 首次发布

(分组合并在最下面，等不急的就从下往上看....)

主要js代码：

           //合并相同内容的行，tableId：TABLE控件的ID，field：绑定的字段名
           function mergeCell(tableId, field) {
               var $tbody = $('#' + tableId + ' + div .layui-table-body tbody');
               var cells = $tbody.find('td[data-field="' + field + '"]');
               var mergeIndex = 0;
               var mark = 1;

               for (var i = 1; i < cells.length; i++) {
                   var prevCell = cells.eq(mergeIndex);
                   var currCell = cells.eq(i);

                   if (prevCell.text() === currCell.text()) {
                       mark++;
                       currCell.hide();
                   } else {
                       prevCell.attr('rowspan', mark);
                       mergeIndex = i;
                       mark = 1;
                   }
               }
               if (mark > 1) {
                   cells.eq(mergeIndex).attr('rowspan', mark);
               }
           }

在layui table 的 done里面调用：

         done: function (res, curr, count) {
             mergeCell('table', 'CUSTOMER_NAME');
             mergeCell('table', 'CONTACT_LINK');
            //...........略.............
         },

完整例子：

 <button id="btnSearch" class="layui-btn layui-btn-xs" onclick="PageList()">搜索</button>

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

 <script type="text/javascript">    
     //查询
     function PageList() {
         var START_DATE = $("#START_DATE").val();
         var END_DATE = $("#END_DATE").val();
         var CUSTOMER_NAME = $("#TXT_CUSTOMER_NAME").val();
         var CONTACT_LINK = $("#TXT_CONTACT_LINK").val();
         var PROJECT_STATUS = $("#TXT_PROJECT_STATUS").val();
         var PROJECT_LEVEL = $("#TXT_PROJECT_LEVEL").val();

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

             table.render({
                 elem: '#table'//对应着Table的ID
                 //, width: '100%'
                 , method: 'POST'
                 , url: '/Controller/ActionResult'//URL为数据接口的地址
                 , where: { //where就是ajax的data，但不包括分页条件
                     "START_DATE": START_DATE,
                     "END_DATE": END_DATE,
                 }
                 , request: {  //分页条件： page  limit
                     pageName: 'page',    //页码的参数名称，默认：page 或者 index、pageIndex
                     limitName: 'size'  //每页数据量的参数名，默认：limit 或者 size、pageSize
                 }
                 , parseData: function (res) {
                     return {
                         "code": 0,//数据类型,必须的
                         "count": res.total,//总记录数,用于分页
                         "data": res.data,//必须的
                     }
                 }
                 , cols: [[
                     { title: '操作', toolbar: '#barDemo', width: 80, align: 'center', fixed: 'left' },
                     { field: 'SID', title: '序号', width: 80, align: 'center', fixed: "left" },                                     
                     { field: 'CUSTOMER_NAME', title: '客户名称', width: 200, align: 'center', fixed: "left" },
                     { field: 'CONTACT_LINK', title: '联系人', width: 100, align: 'center', fixed: "left" },
                     { field: 'CONTACT_PHONE', title: '联系电话', width: 150, align: 'center', fixed: "left" },
                     { field: 'PROJECT_INFO', title: '项目信息', width: 250, align: 'center' },
                     {
                         field: 'PROJECT_STATUS', title: '项目状态', width: 100, align: 'center'
                         , templet: function (d) {
                             if (d.PROJECT_STATUS == 0) return "进行中";
                             else if (d.PROJECT_STATUS == 1) return "<font color='green'>完成</font>";
                             else if (d.PROJECT_STATUS == 2) return "<font color='red'>中止</font>";
                             else return "";
                         }
                     },
                     {
                         field: 'PROJECT_LEVEL', title: '项目等级', width: 100, align: 'center'
                         , templet: function (d) {
                             if (d.PROJECT_LEVEL == 0) return "D";
                             else if (d.PROJECT_LEVEL == 1) return "C";
                             else if (d.PROJECT_LEVEL == 2) return "B";
                             else if (d.PROJECT_LEVEL == 3) return "A";
                             else return "";
                         }
                     },
                     { field: 'HOBBIES', title: '客户喜好', width: 150, align: 'center' },
                     { field: 'BIRTHDAY', title: '纪念日/生日', width: 150, align: 'center' },
                     { field: 'NEEDS', title: '核心诉求', width: 250, align: 'center' },
                     { field: 'RESPONSE', title: '诉求应答', width: 250, align: 'center' },
                     { field: 'EST_AMOUNT', title: '预成交金额(万元)', width: 150, align: 'center' },
                     { field: 'NEED_SUPPORT', title: '需要的支持', width: 250, align: 'center' },
                 ]],
                 page: true,//开启分页功能
                 limit: 25,//当前每页条数
                 limits: [25, 50, 100],//每页条数集合
                 done: function (res, curr, count) {
                     mergeCell('table', 'CUSTOMER_NAME');
                     mergeCell('table', 'CONTACT_LINK');
                     mergeCell('table', 'CONTACT_PHONE');
                     mergeCell('table', 'PROJECT_INFO');
                     mergeCell('table', 'PROJECT_STATUS'); 
                     mergeCell('table', 'PROJECT_LEVEL');

                     mergeCell('table', 'HOBBIES');
                     mergeCell('table', 'BIRTHDAY');
                     mergeCell('table', 'NEEDS');

                     mergeCell('table', 'RESPONSE');
                     mergeCell('table', 'EST_AMOUNT');
                     mergeCell('table', 'NEED_SUPPORT');
                 },
             });
         });
     }

     //合并相同内容的行，tableId：TABLE控件的ID，field：绑定的字段名
     function mergeCell(tableId, field) {
         var $tbody = $('#' + tableId + ' + div .layui-table-body tbody');
         var cells = $tbody.find('td[data-field="' + field + '"]');
         var mergeIndex = 0;
         var mark = 1;

         for (var i = 1; i < cells.length; i++) {
             var prevCell = cells.eq(mergeIndex);
             var currCell = cells.eq(i);

             if (prevCell.text() === currCell.text()) {
                 mark++;
                 currCell.hide();
             } else {
                 prevCell.attr('rowspan', mark);
                 mergeIndex = i;
                 mark = 1;
             }
         }
         if (mark > 1) {
             cells.eq(mergeIndex).attr('rowspan', mark);
         }
     }
   </script>

效果图：

合并前：

合并后：

以下是新的需求：光简单的合并没用，不是同一类的数据内容也合并了，合并前先分组：

重新写了js：

   // 合并规则：主列 + 副列 都相同 → 才合并【副列】
   // tableId：表格ID
   // mainField：主字段（客户名称）
   // subField：要合并的字段（联系人）
   function mergeCell(tableId, mainField, subField) {
       var $tbody = $('#' + tableId + ' + div .layui-table-body tbody');
       var trs = $tbody.find('tr');
       if (trs.length <= 1) return;

       var mergeIndex = 0;
       var mark = 1;

       for (var i = 1; i < trs.length; i++) {
           var prevTr = trs.eq(mergeIndex);
           var currTr = trs.eq(i);

           // 获取两行的 主列、副列 文本
           var prevMain = prevTr.find('td[data-field="' + mainField + '"]').text().trim();
           var currMain = currTr.find('td[data-field="' + mainField + '"]').text().trim();
           var prevSub = prevTr.find('td[data-field="' + subField + '"]').text().trim();
           var currSub = currTr.find('td[data-field="' + subField + '"]').text().trim();

           // ✅ 核心：客户名称相同 + 联系人相同 → 合并联系人
           if (prevMain === currMain && prevSub === currSub) {
               mark++;
               // 隐藏当前行的【副列（联系人）】
               currTr.find('td[data-field="' + subField + '"]').hide();
           } else {
               // 设置上一行的合并行数
               prevTr.find('td[data-field="' + subField + '"]').attr('rowspan', mark);
               mergeIndex = i;
               mark = 1;
           }
       }

       // 最后一组
       if (mark > 1) {
           trs.eq(mergeIndex).find('td[data-field="' + subField + '"]').attr('rowspan', mark);
       }
   }

调用这个js：

           done: function (res, curr, count) {
               mergeCell('table', 'CUSTOMER_NAME', 'CUSTOMER_NAME');
               mergeCell('table', 'CUSTOMER_NAME', 'CONTACT_LINK');
               mergeCell('table', 'CUSTOMER_NAME', 'CONTACT_PHONE');
               mergeCell('table', 'CUSTOMER_NAME', 'PROJECT_INFO');
               mergeCell('table', 'CUSTOMER_NAME', 'PROJECT_STATUS');
               mergeCell('table', 'CUSTOMER_NAME', 'PROJECT_LEVEL');

               mergeCell('table', 'CUSTOMER_NAME', 'HOBBIES');
               mergeCell('table', 'CUSTOMER_NAME', 'BIRTHDAY');
               mergeCell('table', 'CUSTOMER_NAME', 'NEEDS');

               mergeCell('table', 'CUSTOMER_NAME', 'RESPONSE');
               mergeCell('table', 'CUSTOMER_NAME', 'EST_AMOUNT');
               mergeCell('table', 'CUSTOMER_NAME', 'NEED_SUPPORT');
               mergeCell('table', 'CUSTOMER_NAME', 'REMARKS');

               mergeCell('table', 'CUSTOMER_NAME', 'FIRST_MANAGE_DATE');
               mergeCell('table', 'CUSTOMER_NAME', 'LAST_MANAGE_DATE');
               mergeCell('table', 'CUSTOMER_NAME', 'SINCE_DAYS');
           },