将自定义 "ALL"（总计）行添加到可以像任何其他行一样选择的 ag-grid 的顶部

Question

我有一个包含 2 列的 ag-grid table - 一个文本和一个数字。

我需要在我的 ag-grid table 顶部添加一个自定义行，其中包含数字列的总值和文本列中的单词“ALL”。

这需要在顶部。即使 table 已排序，也不应更改其位置。

此外，该行应该是 selectable。

在这方面的任何帮助将不胜感激！

Answer 1

听起来你在描述 Row Pinning which is already a feature in AG Grid. However, since you've also stated that row selection is a requirement, this will not be possible with Row Pinning as it's not supported。

相反，我建议在 rowData 中为自定义行添加一个额外的行对象，并在必要时自行处理数字列和自定义行位置的更新：

如果你想处理数字列的总值那么你可以使用以下逻辑：

function updateTotalRowNode() {
  let totalRowNode;
  let sum = 0;
  gridOptions.api.forEachNode((node) => {
    if (node.data.totalRow) {
      totalRowNode = node;
    } else {
      sum += node.data.gold;
    }
  });
  totalRowNode.setDataValue('gold', sum);
}

如果您希望自定义行始终位于顶行，那么您可以 implement the postSort callback:

  postSort: (rowNodes) => {
    // here we put All row on top while preserving the sort order
    let nextInsertPos = 0;
    for (let i = 0; i < rowNodes.length; i++) {
      const athlete = rowNodes[i].data.athlete;
      if (athlete === 'All') {
        rowNodes.splice(nextInsertPos, 0, rowNodes.splice(i, 1)[0]);
        nextInsertPos++;
      }
    }
  },

参见following plunker for the implementation。

将自定义 "ALL"（总计）行添加到可以像任何其他行一样选择的 ag-grid 的顶部

Adding a custom "ALL" (Total) row to the top of an ag-grid that is selectable like any other row

reactjs

ag-grid

ag-grid-react