如何在AG Grid中实现滚动累计合计列？（React+DRF项目场景）

实现方案 #

你可以将valueGetter从字符串表达式改为函数形式，通过AG Grid暴露的行节点和API获取上一行的显示数据，实现滚动累计余额计算，具体实现如下：

核心代码示例 #

// 累计余额列的valueGetter函数
const balanceValueGetter = (params) => {
  const currentRowIndex = params.node.rowIndex;
  // 计算当前行的本行发生额
  const currentDelta = params.data.tax_credit - params.data.tax_debit;

  // 第一行直接返回本行发生额作为初始累计值
  if (currentRowIndex === 0) {
    return currentDelta;
  }

  // 获取当前显示顺序里的上一行节点
  const prevRowNode = params.api.getDisplayedRowAtIndex(currentRowIndex - 1);
  if (!prevRowNode) {
    return currentDelta;
  }

  // 取上一行的累计余额 + 当前行发生额 = 本次累计余额
  const prevBalance = prevRowNode.getValue('balance');
  return prevBalance + currentDelta;
};

// 列定义修改为
<AgGridColumn field="tax_debit"  headerName="Debit" flex={1} valueFormatter={currencyFormatter} />
<AgGridColumn field="tax_credit"  headerName="Credit" flex={1} valueFormatter={currencyFormatter} />
<AgGridColumn 
  headerName="balance" 
  flex={1} 
  valueGetter={balanceValueGetter} 
  type="totalColumn" 
  valueFormatter={currencyFormatter}
/>

注意事项 #

• 该实现会自动适配AG Grid的排序、过滤操作，getDisplayedRowAtIndex获取的是用户当前可见的行顺序，排序后累计余额会自动重新计算对应顺序的数值
• 如果使用分页功能，分页第一行的初始累计值需要根据上一页最后一行的余额自行调整，可通过AG Grid的分页API获取上一页数据做计算
• 如果数据量超过1万行，可提前在后端预计算累计值后返回，避免前端计算的性能损耗

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