从学生成绩表到业务报表：实战解析ag-grid行列分组的高级配置项

从学生成绩表到业务报表：实战解析ag-grid行列分组的高级配置项

在企业级数据报表开发中，面对复杂的多维数据展示需求，如何高效地组织和呈现数据是每个前端开发者必须掌握的技能。ag-grid作为业界领先的数据网格解决方案，其强大的行列分组功能可以帮助我们构建灵活、交互性强的业务报表。本文将从一个真实的销售数据场景出发，深入探讨ag-grid行列分组的高级配置技巧。

1. 业务场景与数据准备

假设我们正在开发一个全国销售数据报表系统，需要展示按"大区-省份-城市"和"产品类别-子类"两个维度分组的数据。这种多层级分组在业务报表中非常常见，能够帮助管理者快速了解销售数据的分布情况。

首先，我们需要准备模拟的销售数据：

const salesData = [ { region: '华东', province: '江苏', city: '南京', productCategory: '电子产品', productSubCategory: '手机', salesAmount: 1250000, profit: 250000 }, { region: '华东', province: '江苏', city: '苏州', productCategory: '电子产品', productSubCategory: '电脑', salesAmount: 980000, profit: 196000 }, // 更多数据... ];

2. 行列分组基础配置

2.1 行分组配置

在ag-grid中，行分组通过rowGroup属性实现。对于我们的销售数据，可以这样配置：

const columnDefs = [ { headerName: '区域信息', children: [ { headerName: '大区', field: 'region', rowGroup: true, hide: true }, { headerName: '省份', field: 'province', rowGroup: true, hide: true }, { headerName: '城市', field: 'city', pinned: 'left' } ] }, // 更多列定义... ];

2.2 列分组配置

列分组通过嵌套的children属性实现。对于产品分类，我们可以这样配置：

{ headerName: '产品信息', children: [ { headerName: '产品类别', field: 'productCategory', columnGroupShow: 'closed' }, { headerName: '手机', field: 'phoneSales', columnGroupShow: 'open', valueGetter: params => { return params.data.productSubCategory === '手机' ? params.data.salesAmount : null; } }, // 更多子类... ] }

3. 高级分组控制

3.1 分组展开状态控制

groupDefaultExpanded属性可以控制分组的默认展开状态：

gridOptions = { // 其他配置... groupDefaultExpanded: 2, // 展开前两级分组 // 更多配置... };

提示：设置groupDefaultExpanded: -1会展开所有分组层级，这在数据量不大时可以帮助用户快速浏览全部数据。

3.2 自定义分组列

autoGroupColumnDef允许我们自定义分组列的外观和行为：

autoGroupColumnDef: { headerName: '区域层级', minWidth: 200, sort: 'asc', pinned: 'left', cellRendererParams: { suppressCount: false, innerRenderer: (params) => { return params.value; } } }

4. 样式与交互增强

4.1 分组行样式定制

通过CSS可以为不同层级的分组行设置不同的背景色：

/* 第一级分组行样式 */ .ag-row-level-0 { background-color: #f0f8ff !important; font-weight: bold; } /* 第二级分组行样式 */ .ag-row-level-1 { background-color: #e6f7ff !important; } /* 第三级分组行样式 */ .ag-row-level-2 { background-color: #d4f2ff !important; }

4.2 动态分组控制

在实际应用中，我们可能需要根据用户选择动态改变分组方式。这可以通过更新columnDefs实现：

function changeGrouping(useProductGrouping) { const newColumnDefs = [...columnDefs]; // 更新行分组配置 newColumnDefs.forEach(col => { if (col.children) { col.children.forEach(child => { if (child.field === 'productCategory') { child.rowGroup = useProductGrouping; child.hide = useProductGrouping; } }); } }); gridOptions.api.setColumnDefs(newColumnDefs); gridOptions.api.refreshHeader(); }

5. 性能优化技巧

当处理大量数据时，分组操作可能会影响性能。以下是一些优化建议：

• 按需加载数据：只加载当前展开分组的数据
• 禁用不必要的特性：如不需要排序或过滤，可以禁用相关功能
• 使用服务器端分组：对于极大数据集，考虑使用ag-grid的服务器端行模型

gridOptions = { // 其他配置... suppressDragLeaveHidesColumns: true, suppressMakeColumnVisibleAfterUnGroup: true, animateRows: false, // 更多配置... };

6. 实际业务场景应用

在真实的销售报表中，我们通常需要结合多种分组方式和聚合函数。例如，可以配置如下：

{ headerName: '销售业绩', children: [ { headerName: '销售额', field: 'salesAmount', aggFunc: 'sum', valueFormatter: params => formatCurrency(params.value) }, { headerName: '利润率', field: 'profit', aggFunc: params => { const sales = params.values.map(v => v.salesAmount).reduce((a, b) => a + b, 0); const profit = params.values.map(v => v.profit).reduce((a, b) => a + b, 0); return (profit / sales * 100).toFixed(2) + '%'; } } ] }

这种配置可以自动计算各分组层级的汇总数据，为业务分析提供有力支持。