ag-grid 列组和行组学习

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

 

 以上涉及知识点:

       (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 Vue 是一个用于构建灵活的、高性能的数据表格和数据网格的 Vue 组件库。它是与 Vue 框架集成的 ag-Grid 社区版。使用 ag-Grid Vue,您可以轻松地在 Vue 应用程序中创建功能丰富的数据表格和网格,并利用 ag-Grid 提供的丰富功能和性能优势。 要在 Vue 应用程序中使用 ag-Grid Vue,您需要先安装 ag-Grid Vue 包。您可以使用 npm 或 yarn 进安装: ```bash npm install --save ag-grid-vue # 或 yarn add ag-grid-vue ``` 安装完成后,您可以在 Vue 组件中引入并使用 ag-Grid Vue: ```vue <template> <ag-grid-vue :columnDefs="columnDefs" :rowData="rowData" class="ag-theme-alpine" ></ag-grid-vue> </template> <script> import { AgGridVue } from 'ag-grid-vue'; export default { components: { AgGridVue, }, data() { return { columnDefs: [...], // 列定义 rowData: [...], // 数据 }; }, }; </script> <style> @import '~ag-grid-community/dist/styles/ag-grid.css'; @import '~ag-grid-community/dist/styles/ag-theme-alpine.css'; </style> ``` 在上面的示例中,您可以通过传递列定义(columnDefs)和数据(rowData)来配置 ag-Grid Vue 组件。您还需要为 ag-Grid 使用的主题样式添加对应的 CSS。 只是一个简单的示例,您可以根据您的需求和数据结构进更多的配置和自定义。您可以参考 ag-Grid Vue 的官方文档以获取更多详细信息和示例代码。希望这可以帮助您开始使用 ag-Grid Vue!如果有任何其他问题,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值