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-vue3是一个强大的Vue.js表格组件,用于展示和处理大量数据。要向ag-grid-vue3添加,可以通过调用gridApi中的相应方法实现。下面是添加的步骤: 1. 获取gridApi对象 在ag-grid-vue3中,可以通过以下代码获取gridApi对象: ```javascript <AgGridVue ... @grid-ready="onGridReady" ... /> ... methods: { onGridReady(params) { this.gridApi = params.api; ... } } ``` 在onGridReady函数中,将gridApi对象保存在Vue实例的变量中以便后续使用。 2. 添加数据 要添加数据,可以通过调用gridApi对象的applyTransaction方法实现。该方法需要传入一个Transaction对象作为参数,Transaction对象包含要添加的数据。 ```javascript addRow() { const newRowData = { id: 4, name: 'John Doe', age: 30, gender: 'Male' }; const addTransaction = { add: [newRowData], }; this.gridApi.applyTransaction(addTransaction); } ``` 在上述代码中,首先定义一个新数据newRowData,然后创建一个Transaction对象addTransaction,其中包含要添加的数据。最后,调用gridApi的applyTransaction方法并将addTransaction作为参数传入即可。 3. 更新视图 添加数据后,需要更新视图以显示新的数据。可以通过调用gridApi对象的refreshCells方法实现: ```javascript addRow() { ... this.gridApi.applyTransaction(addTransaction); this.gridApi.refreshCells(); } ``` 在上述代码中,添加数据后调用gridApi的refreshCells方法即可更新视图。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值