ag-grid 合并单元格（合并行）

前端菜鸟来报道

已于 2023-06-29 14:19:18 修改

阅读量6.3k

点赞数 1

分类专栏： ag-grid 文章标签： ag-grid 单元格合并

于 2021-08-27 17:10:59 首次发布

本文链接：https://blog.csdn.net/WQearl/article/details/119955264

版权

ag-grid 专栏收录该内容

15 篇文章 29 订阅

订阅专栏

最终效果如下图：

页面完整代码如下：

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>合并单元格行</title>
    <script type="text/javascript" src="../js/ag-grid-enterprise.min.js"></script>

    <style>
        .cell-span {
            background-color: aliceblue;  /* 设置背景颜色 */
             text-align: center;  /* 字体横向居中 */
        }
    </style>
</head>

<body>

    <div id="myGrid" style="width: 100%;height: 500px;" class="ag-theme-alpine"></div>


    <script>
        //定义表格列
        var columnDefs = [
            {
                headerName: '姓名',
                field: 'name'
            }, {
                headerName: '性别',
                field: 'sex',
                rowSpan: (params) => {
                    debugger;// 按顺序合并性别，男女
                    if (params.data.sex === '男') {
                        return 2;
                    }

                    if (params.data.sex === '女') {
                        return 2;
                    }
                    return 1;

                },
                cellClassRules: {
                    'cell-span': "value !== undefined"
                },
                cellRenderer: (params) => {
                    return `<div style="margin-top:20px"}}> ${params.value}</div>`;   // 用于字体垂直居中
                }
            }, {
                headerName: '年龄',
                field: 'age',
            }, {
                headerName: '籍贯',
                field: 'jg'
            }, {
                headerName: '省份',
                field: 'sf',
                rowSpan: (params) => {

                    if (params.data.sf === '浙江') {
                        return 4;
                    }
                    return 1;

                },
                cellClassRules: {
                    'cell-span': "value !== undefined"
                },
                cellRenderer: (params) => {
                    return `<div style="margin-top:60px"}}> ${params.value}</div>`;   // 用于字体垂直居中
                }
            }, {
                headerName: '地址',
                field: 'dz'
            },
        ];


        //与列对应的数据; 属性名对应上面的field
        var data = [
            { name: '张三', sex: '男', age: '100', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路1号' },
            { name: '李四', sex: '', age: '5', 'jg': '中国', 'sf': ' ', 'dz': '杭州市古墩路12号' },
            { name: '王舞', sex: '女', age: '20', 'jg': '中国', 'sf': ' ', 'dz': '杭州市古墩路32号' },
            { name: '李梅', sex: '', age: '10', 'jg': '中国', 'sf': ' ', 'dz': '杭州市古墩路39号' },

        ];

        //将列和数据赋给gridOptions 
        var gridOptions = {
            columnDefs: columnDefs,  //设置列名
            rowData: data,  //设置数据
            suppressRowTransform: true,// 合并单元格需要

        };

        //在dom加载完成后 初始化agGrid完成
        document.addEventListener("DOMContentLoaded", function () {
            var eGridDiv = document.querySelector('#myGrid');  //myGrid 是容器div的ID
            new agGrid.Grid(eGridDiv, gridOptions);
        });
    </script>
</body>

</html>

具体重要代码参数说明：

1、rowSpan：用于设置跨越的行数；

2、cellClassRules：用于设置跨行的样式：

（1）设置哪些值需要进行合并，如果是所有值都需要合并的话，那么直接写

value ！==undefined 或者 value ！==null (这个需要看数据的具体内容来设定)，如果只需要合并某一个或者某两个，可以设置为 value ===’男‘ || value ===’男‘value ===’女‘

（2）调用css，渲染合并列的背景色，如果不渲染背景色，效果如图：

2023.06.29补充：

cellClassRules 属性还可以根据行的具体参数设置不同的样式。

注：param.data中的数据就是列表本行的数据，这行的合并单元格想要什么样式，可以根据这个值单独设置。

例如如下代码，性别为男的合并单元格使用history-cell-span-1 样式。性别为女的合并单元格使用history-cell-span-2 样式。

这样两个单元格的样式可以有所不同。

  cellClassRules: {
    'history-cell-span-1': (param: any) => {
      // 性别为男的时候用history-cell-span-1样式
      return param.data.sex == '男';
    },
    'history-cell-span-2': (param: any) => {
    // 性别为女的时候用history-cell-span-2样式
      return param.data.rowSpan === '女';
    }
  },

3.设置 suppressRowTransform 属性为true；

如果没有设置这个属性，效果如下：

4.源数据data中，需要合并行的列，只需要需合并行的第一行的值，接下同样的值为空或者其他值，反正一定不能跟需要合并的值一样。比如：sex和sf列。

数据格式如下所示：

如果数据都是一样的，那么合并单元格就会出错，如图：

5.利用cellRenderer将不能垂直居中的数据设置为垂直居中。如果不不设置，效果如下：

前端菜鸟来报道

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
7
评论
ag-grid 合并单元格（合并行）

最终效果如图：页面完整代码如下：<!doctype html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>合并单元格行</title> <script .
复制链接

扫一扫

专栏目录