如何在ag-grid表头中显示列合计值

你可以通过内置的表头取值方法配合数据计算快速实现Age(合计值)的展示效果，不需要额外引入复杂的自定义组件，具体实现如下：

核心实现逻辑 #

• 动态计算目标列合计值
  如果使用客户端行模型，直接通过grid实例提供的方法遍历行数据求和即可，如果需要统计过滤后的结果就用forEachNodeAfterFilter，不需要过滤逻辑就用forEachNode遍历全量数据：

  // 以年龄列求和为例
  let ageTotal = 0
  gridApi.forEachNodeAfterFilter(rowNode => {
    if (typeof rowNode.data.age === 'number') {
      ageTotal += rowNode.data.age
    }
  })
  

• 配置列定义动态渲染表头
  在对应列的columnDef里用headerValueGetter动态拼接表头文本，把计算好的合计值放到括号里：

  const columnDefs = [
    {
      field: 'age',
      // 每次表头渲染时动态计算并返回文本
      headerValueGetter: (params) => {
        let total = 0
        params.api.forEachNodeAfterFilter(node => {
          if (typeof node.data.age === 'number') total += node.data.age
        })
        return `Age(${total})`
      },
      // 其余列配置，比如宽度、编辑器、单元格渲染器等
    },
    // 其余列定义
  ]
  

• 绑定事件实时更新合计值
  当数据修改、过滤条件变化、行数据更新时，合计值会发生变化，需要在对应事件触发时刷新表头，保证展示的数值准确：

  const gridOptions = {
    columnDefs: columnDefs,
    // 其余grid配置
    onFilterChanged: (params) => params.api.refreshHeader(),
    onRowDataUpdated: (params) => params.api.refreshHeader(),
    onCellValueChanged: (params) => params.api.refreshHeader()
  }
  

特殊场景说明 #

如果你使用服务端行模型、无限滚动行模型，前端拿不到全量行数据，可以让后端接口在返回数据时额外返回对应列的全量合计值，存到grid的context配置中，在headerValueGetter里直接读取context里的合计值拼接即可，刷新表头的逻辑和客户端模式完全一致。

最终实现效果参考：

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