ag-grid之分组（Grouping）还是树形数据(Tree Data)：我要分组(Grouping)

今朝有熊
821 阅读4分钟

引言（Introduction）

ag-grid是一个非常强大的数据表格组件，支持丰富的功能扩展，其中分组功能便是非常实用的一项。在日常使用时，常常会将分组功能和树功能混淆，虽然它们的外在表现极其相似。但是分组（Grouping）  和 树形数据（Tree Data）  是两种完全不同的数据组织方式，它们的设计目标、使用场景和底层实现都有显著差异。

在这篇文章中，我们将介绍ag-grid的分组功能。实现对数据的分组展示，并且对分组的内容进行定制，满足不同的业务需求。

提示：本文使用的ag-grid版本是v33，请确保在相应版本下应用代码示例。

一、Row Grouping核心概念

功能定义：行分组允许用户通过拖拽列头将数据按指定字段分层组织

1. 核心优势：

-   多维数据透视分析能力
-   动态交互式数据探索
-   自动聚合计算支持
-   树形结构与平面数据自由切换

2. 适用场景

  • 销售数据展示：在显示销售数据时，按地区、销售员、产品等进行分组，能够清晰地展示每个分组的总销售额。
  • 财务报表：按月份、季度或年度进行分组，可以帮助用户轻松浏览不同时间段的财务数据。
  • 产品分类：在产品管理系统中，将产品按类别进行分组，便于查看每一类别下的产品。

二、如何启用ag-grid的分组功能

1. 启用行分组（Row Grouping）

行分组是最常用的分组方式。通过设置rowGroup属性，我们可以将某一列的值作为分组的依据。ag-grid会自动将相同的值放在同一组内。

关键配置属性

  • rowGroup: 控制列是否参与分组
  • aggFunc: 定义聚合函数（sum, avg, min, max等）
  • autoGroupColumnDef: 自定义分组列显示
  • groupDisplayType: 分组显示形式（singleColumn/multipleColumns/groupRows）
配置分组功能

要启用行分组，首先需要在columnDefs中指定哪些列需要分组。通过在列定义中添加rowGroup: true，ag-grid会根据这一列的值自动将数据进行分组。

示例代码：

const gridOptions = {
  columnDefs: [
    { headerName: "Region", field: "region", rowGroup: true }, // 启用行分组
    { headerName: "Sales", field: "sales" },
    { headerName: "Year", field: "year" },
  ],
  rowData: [
    { region: "North", sales: 1200, year: 2021 },
    { region: "South", sales: 950, year: 2021 },
    { region: "North", sales: 1100, year: 2022 },
    { region: "South", sales: 1050, year: 2022 },
  ],
  groupDisplayType: 'groupRows'
};

在此示例中，我们根据“Region”字段进行行分组，ag-grid会自动将相同地区的数据放在同一组中。通过groupDisplayType: 'groupRows'，整个分组行会占据整行显示，提升了分组的可见性。

三、常用与分组相关的属性

1. groupDisplayType

提示：groupDisplayType属性是v30版本开始提供的，以前类似的功能是使用groupMultiAutoColumn和groupUseEntireRow来实现的

行层次结构可以通过三种不同的方式显示：

  • singleColumn 默认值。使用后，会新创建一个Group列展示分组，如果设置了多列分组，所有分组都会集中在这一列中展示
  • multipleColumns 不会新创建一个Group列展示分组，如果设置了多列分组，则展开/收起箭头图标分散在设置的列中
  • groupRows 行分组会占据整行。类似于手风琴的展示效果。

2. groupDefaultExpanded

此属性控制分组在初次加载时是否展开。groupDefaultExpanded可以设置为0（完全折叠）、-1（完全展开）、1（展开第一层分组）、或者更大的数字来展开更多层级的分组。

示例代码：

const gridOptions = {
  columnDefs: [
    { headerName: "Region", field: "region", rowGroup: true },
    { headerName: "Sales", field: "sales" },
  ],
  groupDefaultExpanded: 1,  // 默认展开第一层分组
};

在这个示例中，第一层分组会在加载时展开，其他层级会保持折叠状态。

3. autoGroupColumnDef

此属性允许自定义分组列的外观，包括标题、宽度、对齐方式等。

示例代码：

const gridOptions = {
  columnDefs: [
    { headerName: "Region", field: "region", rowGroup: true },
    { headerName: "Sales", field: "sales" },
  ],
  autoGroupColumnDef: {
    headerName: "Region Group", // 自定义分组列标题
    width: 200,  // 设置分组列宽度
  },
};

四、总结与实际应用

通过这篇文章的学习，我们已经简单了解了ag-grid的分组功能。

avatar
文章
阅读
粉丝