easyUI单元格合并自定义封装 (一)

最新推荐文章于 2025-08-19 02:20:02 发布

七夕小娜

最新推荐文章于 2025-08-19 02:20:02 发布

阅读量552

点赞数

分类专栏： easyui 文章标签： easyui

easyui 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用 EasyUI 的 datagrid 控件实现指定列的行合并的方法。通过 JavaScript 函数 `mergeGridColCells` 实现了当指定列的数据相同时合并这些单元格的功能。

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

1、指定列的行合并

* 效果图：

* 程序：

[javascript] view plain copy

function mergeGridColCells(grid,rowFildName)
{
       var rows=grid.datagrid('getRows' );
       //alert(rows.length);
       //alert(rows[1][rowFildName]);
       var startIndex=0;
       var endIndex=0;
       if(rows.length< 1)
      {
             return;
      }
      $.each(rows, function(i,row){
             if(row[rowFildName]==rows[startIndex][rowFildName])
            {
                  endIndex=i;
            }
             else
            {
                  grid.datagrid( 'mergeCells',{
                        index: startIndex,
                        field: rowFildName,
                        rowspan: endIndex -startIndex+1
                  });
                  startIndex=i;
                  endIndex=i;
            }

      });
grid.datagrid( 'mergeCells',{
                  index: startIndex,
                  field: rowFildName,
                  rowspan: endIndex -startIndex+1
      });
}

*参数说明

grid： easyUI的datagrid对象

rowFildName：和并列的field属性值