计算行：如何使用AG Grid根据同一列中其他行的值计算特定列的单元格值？

Question

我想使用同一列中其他行的值对特定行执行自定义计算。我发现AG Grid提供了定义Column Definition Expressions and aggFunc的能力，但是他们并没有解决我想要的：

Column Definition Expressions（姑且称之为CDE）允许用户引用同一行的其他列
aggFunc 在分组的情况下很有帮助，用户可以使用内置函数或定义自定义聚合函数，它只能在特定组内使用同一列的单元格值。

我需要解决以下问题：

Category groups         | Jan                        | Feb | Total
---------------------------------------------------------------------------------
Income                  | {it is place for aggFunc}  |     | {it is place for CDE}
    In 1                |                            |     |
    In 2                |                            |     |
    Ignored In in Net   |                            |     |
Liabilities             |                            |     |
Net Income       ???    | In 1 + In 2 - Liabilities  |     |
Net Income Total ???    | Income - Liabilities       |     |

结果应该是这样的：

Category groups         | Jan   | Feb | Total
----------------------------------------------
Income                  | 62    |  17 |  79
    In 1                | 12    |  10 |  22
    In 2                | 20    |  5  |  25
    Ignored In in Net   | 30    |  2  |  32
Liabilities             | 15    |  10 |  25
Net Income       ???    | 17    |  5  |  22
Net Income Total ???    | 47    |  7  |  54

所以，我如何通过 AG Grid 为 Net Income 行和 Net Income Total 行定义公式（expression/aggregation 函数） ), 我可以在同一列中引用任何需要的行（在上面的例子中Net Income = In 1 + In 2 - Liabilities 和 Net Income Total = Income - Liabilities 一月、二月等）？哪个API可以用？

现在，我实现了这个 DEMO，但我没有在 AG Grid 官方文档中找到任何关于如何实现所需案例的线索，这个库是否可以在所有...

UPD。我试图通过以下方式实现它：

覆盖 getRowNodeId() 回调以获得可预测的 rowNodeId；
通过api.getRowNode(rowId)获取行节点；
使用具有 2 个参数 (colKey, rowNode) 的 getValue() 函数，理论上它应该 return 指定行的目标列的值。

结果我有：

gridOptions = {
  getRowNodeId: row => {
    return `${row.level0}${row.lastLevel}`;
  },
  ...
  columnTypes: {
    ...
    janType: {
      enableValue: true,
      aggFunc: 'sum',
      valueGetter: ({ data, getValue, api }) => {
        if (data.lastLevel === 'Net Income') {
          const in1Row = api.getRowNode('IncomeIn 1');
          const in2Row = api.getRowNode('IncomeIn 2');
 
          // Uncaught RangeError: Maximum call stack size exceeded
          return getValue("Jan", in1Row) + getValue("Jan", in2Row);
        }
        ...
        return data.Jan;
      }
    },
    ...
  },
};

这不起作用，getValue("Jan", in1Row) + getValue("Jan", in2Row) 导致 Uncaught RangeError: Maximum call stack size exceeded。

感谢 ideas/examples 解决此案！

Answer 1

目前，似乎唯一可能的实现方式和位置是使用 onGridReady 事件，并且可以为计算的行设置值（通过 rowNode.setDataValue()） .网格在此阶段具有所有数据（+聚合数据）。此 link 有助于了解如何收集所有数据。

更好的方法是定义getRowNodeId回调

getRowNodeId: row => {
   // custom rowNodeId resolver
},

并按数据列和 rowId（Jan、Feb 等）获取值。

这是一个简单的实现：

  onGridReady: ({ api }) => {
    const income = api.getRowNode('row-group-0');
    const in1Row = api.getRowNode('IncomeIn 1');
    const in2Row = api.getRowNode('IncomeIn 2');
    const liabilities = api.getRowNode('Liabilities');
    
    api.forEachNode(rowNode => console.log(rowNode.id));

    for (const col of ["Jan", "Feb"]) {
      const netIncome = api.getValue(col, in1Row) + api.getValue(col, in2Row) - api.getValue(col, liabilities);
      const netIncomeTotal = api.getValue(col, income) - api.getValue(col, liabilities);

      const netIncomeRow = api.getRowNode('Net Income');
      netIncomeRow.setDataValue(col, netIncome);

      const netIncomeTotalRow = api.getRowNode('Net Income Total');
      netIncomeTotalRow.setDataValue(col, netIncomeTotal);
    }
  }

引用 plunker HERE.

Answer 2

您是否看过我们与 AG Grid 结合使用的 AdapTable 中的计算列。

它给你的正是你想要的：https://docs.adaptabletools.com/guide/handbook-calculated-column

计算行：如何使用AG Grid根据同一列中其他行的值计算特定列的单元格值？

Calculated row: How to calculate cell value of the particular column based on the values from other rows in the same column using AG Grid?

reactjs

ag-grid

ag-grid-react

ag-grid-angular

ag-grid-vue