在该列的第一个单元格中显示计算行总和的列的总和？

Question

在 ag-grid 和 Vue2 中，我有一列对其行进行求和。该网格还在顶部添加两行：总计行和百分比行。我面临的问题是：显示总计列的总和，该列已经使用 valueGetter 来显示行的总和。

这是 Plunker 中的示例：https://plnkr.co/edit/2HSVIY2APIyx622W?open=main.js&preview

尝试访问索引 0 的 rowData 似乎不起作用，因为实际的 rowData 不包含行的总和（除非我在这里遗漏了一些东西）。

valueGetter(params) {
    if (params.node.rowIndex === 0) {
    // Total column sum
    }
    if (params.node.rowIndex === 1) {
         return '100%'
    }
    
    // this calculates the rows sum
    if (params.node.rowIndex > 1) {
         const editableColumns = this.getEditableColumns();
         let total = 0;

         editableColumns.forEach((column) => {
          total += params.data[column];
         });

         return total;
    }
},

Answer 1

我对Vue不熟悉，但用ag-grid做过很多开发。

我认为你的问题是一个常见问题，是概念性的。

也就是说，您正在尝试使用网格作为数据存储。

相反，我建议您保留所有数据，包括服务器提供的数据和客户端计算的应用程序数据（与网格分开），然后仅将网格用作用户界面。

因此，在您的情况下，网格需要显示两个计算行，后跟一些服务器提供的数据行，模式将是让您向网格呈现的“rowData”数组实际上具有这两个计算行行作为数组中的前两个条目。

如果您允许通过网格编辑数据，则每次编辑后都会更新计算的行。

Answer 2

我需要更深入才能得到想要的结果

结果：

为此，当行索引为 0 时，我必须迭代可编辑列并获取列总计

      if (params.node.rowIndex === 0) {
        const nodes = params.api.getRenderedNodes();

        let columnTotal = 0;

        // Total column sum
        const editableColumns = this.getEditableColumns();
        let total = 0;

        editableColumns.forEach((column) => {
          console.log('column', column);
          console.log(params.data[column]);
          for (let i = 0; i < nodes.length; i++) {
            console.log('node', nodes[i]);
            if (nodes[i].id > 1) {
              columnTotal += nodes[i].data[column];
            }
          }
        });

        return columnTotal;
      }

这是工作plunkr：https://plnkr.co/edit/ssypxwVcqm2nWqYV?preview