ag-grid 列组和行组学习

最新推荐文章于 2023-10-08 15:01:33 发布

前端菜鸟来报道

最新推荐文章于 2023-10-08 15:01:33 发布

阅读量3.5k

点赞数 2

分类专栏： ag-grid 文章标签： ag-grid

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

版权

ag-grid 专栏收录该内容

15 篇文章 29 订阅

订阅专栏

首先，话不多说，直接上效果图。

以上涉及知识点:

(1)列的伸缩：设置列的columnGroupShow属性即可。

在汇总那一列（总分），设置columnGroupShow为closed。在其他伸缩列设置columnGroupShow为open即可。

                headerName: '分数',
                children: [
                    {
                        headerName: '总分',
                        field: 'total',
                        columnGroupShow: 'closed',   //列组分组

                    },
                    {
                        headerName: '语文',
                        field: 'chinese',
                        columnGroupShow: 'open',  //列组分组

                    },
                    {
                        headerName: '数学',
                        columnGroupShow: 'open',   //列组分组
                        field: 'math',

                    },
                    {
                        headerName: '英语',
                        columnGroupShow: 'open',   //列组分组
                        field: 'english',

                    }
                ]

（2）默认展开分组:使用groupDefaultExpanded

默认情况下打开组的级别：-1：展开所有组；0：不展开组；1：只展开第一层组别；2：之展开前两层组别，（我的理解是，数字是几就展开前几层组别，暂时没有进行多个组别的测试）;

groupDefaultExpanded: 1

(3) 对分组列的设置

例如设置分组别名,设置分组列的宽度,设置分组列的排序,设置列的固定位置,还有是否显示分组列右边的统计个数.

autoGroupColumnDef: {
                headerName: '分组别名',  // 设置分组之后列的显示名称，如果不设置，则默认显示为“Group”。
                minWidth: 100, // 设置分组列的最小宽度，其他属性也可以设置，例如：width；maxWidth
                sort: 'asc', // 对分组进行排序，asc是升序，desc是降序
                pinned: 'left', // 将分组列固定在左边
                cellRendererParams: {
                    suppressCount: true,  // 不显示分组列右边的计数个数
                }
       },

（4）设置每一层分组行的颜色，比如图中的桃红、白黄色以及浅蓝色。

每一层都有不同的颜色，要实现这样的效果，需要使用ag-grid的css中的属性：

第一层颜色：使用.ag-row-level-0 。

        /* 分组第一层行的颜色 */
        .ag-row-level-0 {
            background-color: plum !important;
        }

第二层颜色：使用.ag-row-level-1 。

        /*   分组第二层行的颜色 */
        .ag-row-level-1 {
            background-color: papayawhip !important;
        }

第三层颜色：使用.ag-row-level-2

        /*   分组第三层行的颜色.......以此类推 */
        .ag-row-level-2 {
            background-color: powderblue !important;
        }

备注： 以我的理解，要显示几层的颜色只需要设置.ag-row-level-XX 即可（本人未进行更深层次颜色的测试）。

以下是上面效果的所有代码：

<!doctype html>
<html>

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

    <style>
        /* 对表格的表头进行渲染 */
        .ag-header-cell-label {
            color: red;
        }

        /* 分组第一层行的颜色 */
        .ag-row-level-0 {
            background-color: plum !important;
        }

        /*   分组第二层行的颜色 */
        .ag-row-level-1 {
            background-color: papayawhip !important;
        }

        /*   分组第三层行的颜色.......以此类推 */
        .ag-row-level-2 {
            background-color: powderblue !important;
        }

    </style>

</head>
 
<body>


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

    <script>

        const columnDefs = [
            {
                headerName: '基本信息',
                children: [
                    {
                        headerName: '年级',
                        field: 'grade',
                        rowGroup: true,  //行组分组
                        hide: true,  //行组分组需要隐藏列
                    },
                    {
                        headerName: '班级',
                        field: 'class',
                        rowGroup: true,  //行组分组
                        hide: true,  //行组分组需要隐藏列

                    }, {
                        headerName: '姓名',
                        field: 'name',
                        pined: "left"
                    }
                ]
            },
            {
                headerName: '分数',
                children: [
                    {
                        headerName: '总分',
                        field: 'total',
                        columnGroupShow: 'closed',   //列组分组

                    },
                    {
                        headerName: '语文',
                        field: 'chinese',
                        columnGroupShow: 'open',  //列组分组

                    },
                    {
                        headerName: '数学',
                        columnGroupShow: 'open',   //列组分组
                        field: 'math',

                    },
                    {
                        headerName: '英语',
                        columnGroupShow: 'open',   //列组分组
                        field: 'english',

                    }
                ]
            }
        ];
        const data = [
            {
                grade: "高一",
                class: '二班',
                name: '王五',
                total: '260',
                chinese: '80',
                math: '90',
                english: '90'
            }, {
                grade: "高一",
                class: '二班',
                name: '张三',
                total: '200',
                chinese: '70',
                math: '100',
                english: '30'
            }, {
                grade: "高一",
                class: '二班',
                name: '李四',
                total: '270',
                chinese: '89',
                math: '91',
                english: '90'
            }, {
                grade: "高二",
                class: '三班',
                name: '小明',
                total: '300',
                chinese: '100',
                math: '100',
                english: '100'
            }, {
                grade: "高二",
                class: '三班',
                name: '小红',
                total: '265',
                chinese: '88',
                math: '90',
                english: '87'
            }, {
                grade: "高二",
                class: '三班',
                name: '小华',
                total: '290',
                chinese: '100',
                math: '100',
                english: '90'
            }
        ];

        var gridOptions = {
            defaultColDef: {
                sortable: true,
                resizable: true,
                filter: true,
            },
            debug: true,
            columnDefs: columnDefs,
            rowData: data,
            // 对组别的设置
            autoGroupColumnDef: {
                headerName: '分组别名',  // 设置分组之后列的显示名称，如果不设置，则默认显示为“Group”。
                minWidth: 100, // 设置分组列的最小宽度，其他属性也可以设置，例如：width；maxWidth
                sort: 'asc', // 对分组进行排序，asc是升序，desc是降序
                pinned: 'left', // 将分组列固定在左边
                cellRendererParams: {
                    suppressCount: true,  // 不显示分组列右边的计数个数，如果是false，就是要统计个数
                }
            },

            // 是否展开分组
            groupDefaultExpanded: 2,// 默认情况下打开组的级别：-1：展开所有组；0：不展开组；1：只展开第一层组别；2：之展开前两层组别，（我的理解是，数字是几就展开前几层组别，暂时没有进行多个组别的测试）

        };

        document.addEventListener('DOMContentLoaded', function () {
            var gridDiv = document.querySelector('#myGrid');
            new agGrid.Grid(gridDiv, gridOptions);
        });


    </script>
</body>

</html>

前端菜鸟来报道

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
ag-grid 列组和行组学习

首先，话不多说，直接上效果图。代码如下：<!doctype html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=...
复制链接

扫一扫

专栏目录