You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

ag-grid是否支持创建自定义分组函数实现非等值分组逻辑?

ag-grid 自定义非等值行分组实现方案

完全支持自定义分组逻辑,不需要受默认等值匹配规则限制,官方提供了可扩展的配置入口,相关配置没有直接放在行分组的入门说明里,很容易被忽略。

实现方式一:通过列定义的keyGetter配置(最常用)

ag-grid默认的等值分组,本质是取配置了rowGroup: true的列的原始字段值作为分组key做匹配,你可以通过给该列配置keyGetter函数,完全自定义分组key的生成逻辑,所有模糊匹配、区间匹配、多字段组合匹配的需求都可以在这个函数里实现:

  • 函数入参是当前行的上下文对象,可以拿到整行数据、列属性等所有信息
  • 函数的返回值就是分组判定的依据,返回相同值的行会被归到同一个分组下

示例代码:

const columnDefs = [
  // 其他业务列配置...
  {
    field: 'skuName',
    rowGroup: true,
    hide: true, // 隐藏原始分组列,只展示分组行
    // 自定义分组key生成逻辑
    keyGetter: (params) => {
      const skuName = params.data.skuName
      const price = params.data.price
      // 模糊匹配:名称含奶/乳关键词归为乳制品
      if (skuName.includes('奶') || skuName.includes('乳')) return '乳制品类'
      // 区间匹配:价格0-20归为平价档位
      if (price >= 0 && price < 20) return '平价商品'
      // 可自行扩展其他匹配规则
      return '其他分类'
    },
    // 可选:自定义分组排序规则
    comparator: (a, b) => {
      const sortOrder = {'乳制品类': 1, '平价商品': 2, '其他分类':3}
      return sortOrder[a] - sortOrder[b]
    }
  }
]

实现方式二:预处理分组字段(灵活度最高)

如果你的分组逻辑特别复杂,比如需要跨多行做关联匹配、用到正则/模糊搜索算法甚至聚类逻辑,可以提前处理传入grid的数据集:

  • 客户端模式下:在调用api.setGridOption('rowData', data)之前,先遍历全量数据,按照你自己的规则给每一行加一个专属的customGroupKey字段,之后直接把这个字段作为分组列做默认等值分组即可,完全绕开内置的字段取值逻辑
  • 服务端行模型下:直接在服务端完成自定义分组计算,返回符合ag-grid分组结构要求的数据即可,前端不需要额外做分组逻辑适配

提示:自定义分组key后,建议同步配置分组列的cellRenderer,自定义分组行的显示文案,避免出现分组标题显示不符合预期的问题。

内容的提问来源于stack exchange,提问作者Sam Orozco

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.30 10:01:00