easyUI单元格合并自定义封装（二）

最新推荐文章于 2024-09-06 10:02:37 发布

carroll0911

最新推荐文章于 2024-09-06 10:02:37 发布

阅读量3.5k

点赞数

分类专栏： javascript 源码

本文链接：https://blog.csdn.net/core_star/article/details/8928111

版权

javascript 源码专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一种使用 EasyUI 的 datagrid 实现自定义列合并的方法，并提供了具体的 JavaScript 函数实现细节与示例调用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

效果图与 easyUI单元格合并自定义封装 (一) 效果图一致

源代码如下：

function mergeGridColCells(grid,refCols,rowFildNames)
      {
             var rows=grid.datagrid('getRows' );
             //alert(rows.length);
             //alert(rows[1][rowFildName]);
             var flag=false ;
             var startIndex=0;
             var endIndex=0;
             if(rows.length< 1)
            {
                   return;
            }
            $.each(rows, function(i,row){
              $.each(refCols, function(j,refCol){
                    if(row[refCol]!=rows[startIndex][refCol])
                    {
                          flag= false;
                          return false ;
                    }
                    else
                    {
                          flag= true;
                    }
              });
                  //if(row[rowFildName]==rows[startIndex][rowFildName])
                  if(flag)
                  {
                        endIndex=i;
                  }
                   else
                  {
                         $.each(rowFildNames, function(k,rowFildName){
                               grid.datagrid( 'mergeCells',{
                                    index: startIndex,
                                    field: rowFildName,
                                    rowspan: endIndex -startIndex+1,
                                    colspan: null
                              });
                         });
                       
                        startIndex=i;
                        endIndex=i;
                  }
            });
            $.each(rowFildNames, function(k,rowFildName){
                   grid.datagrid( 'mergeCells',{
                              index: startIndex,
                              field: rowFildName,
                              rowspan: endIndex -startIndex+1,
                              colspan: null
                        });
          });
      }

参数说明

grid： easyUI的datagrid对象

refCols 合并参考列数组，及这些列都相等则合并rowFildNames指定的列

rowFildNames：和并列的field属性值及要合并的列数组
示例： mergeGridColCells($('#serviceTypeTable'),['serviceTypeId','areaId'],['areaName']);