ag-grid应用筛选后百分比差值计算结果异常问题求助

常见原因 #

• 计算逻辑用了原始全量数据而非筛选后的行数据：比如直接从初始数据集取去年/今年销售额，没同步筛选后的节点数据，导致分组聚合时统计了未被筛选的行。
• 分组聚合配置未关联筛选状态：分组节点的children属性是全量子节点，而筛选后应该用childrenAfterFilter来获取有效子节点，否则聚合值还是全量数据的总和。
• 单元格计算结果被缓存：AG Grid默认会缓存单元格值，如果valueGetter没监听筛选变化，筛选后不会自动重新计算。

具体解决方法 #

1. 基于筛选后的节点数据计算

无论是普通行还是分组行，都从当前节点/API获取筛选后的数据：

// 百分比列的valueGetter配置
{
  headerName: '同比差值(%)',
  field: 'percentageDiff',
  valueGetter: params => {
    // 区分分组行和普通行，取对应的数据
    const node = params.node;
    let lastYearSales, thisYearSales;
    
    if (node.group) {
      // 分组行：用筛选后的聚合数据，或者遍历childrenAfterFilter计算
      lastYearSales = node.aggData.lastYearSales;
      thisYearSales = node.aggData.thisYearSales;
      // 如果自定义聚合，也可以手动遍历筛选后的子节点：
      // let totalLast = 0;
      // node.childrenAfterFilter.forEach(child => totalLast += child.data.lastYearSales);
    } else {
      // 普通行：直接取当前行数据
      lastYearSales = params.data.lastYearSales;
      thisYearSales = params.data.thisYearSales;
    }
    
    return lastYearSales ? ((thisYearSales - lastYearSales) / lastYearSales * 100).toFixed(2) + '%' : '--';
  }
}

2. 配置分组聚合时关联筛选状态

确保分组列的聚合函数基于筛选后的子节点：

// 去年销售额列的聚合配置
{
  headerName: '去年销售额',
  field: 'lastYearSales',
  aggFunc: (params) => {
    // params.values是筛选后的子节点值数组，直接sum即可
    return params.values.reduce((acc, val) => acc + val, 0);
  }
}

3. 筛选后强制刷新单元格

在筛选变更事件里触发百分比列的重绘，确保计算逻辑重新执行：

const gridOptions = {
  onFilterChanged: (params) => {
    // 只刷新百分比列，提升性能
    params.api.refreshCells({
      columns: ['percentageDiff'], // 替换成你的百分比列field或colId
      force: true // 强制忽略缓存，重新计算
    });
  }
}

4. 避免全局缓存数据

不要用全局变量存储初始数据集做计算，每次计算都通过AG Grid API获取当前显示的行：

// 获取所有筛选后的普通行数据（非分组行）
const getFilteredRows = () => {
  const rows = [];
  gridApi.forEachNodeAfterFilter(node => {
    if (!node.group) rows.push(node.data);
  });
  return rows;
}

内容的提问来源于stack exchange，提问作者Mapperkids Lee