如何在 ag-grid 表的页脚中启用或显示总行

Posted 2023-03-28

【中文标题】如何在 ag-grid 表的页脚中启用或显示总行

【英文标题】：How to enable or show total row in footer of ag-grid table

【发布时间】：2021-03-18 11:52:07

【问题描述】：

我正在使用 Ag-Grid 表格，我想在表格的页脚中显示总行。一些我是如何通过使用 2 个表来实现的，其中 1 用于实际数据，2nd 用于总计行。

正常的不可滚动表格可以正常工作，但如果它是固定或可滚动表格，则顶部表格会滚动，但底部表格会粘在同一位置。

我想以相同的偏移量同时滚动两个表格。

更多细节请看下面的截图，我有总底表。

普通表：

您可以在普通表格中看到它完美地显示了总数。

在固定的列表中，它没有按预期工作。

固定列表：

查看两个表格的滚动条。

我想同时滚动两个表格。

或者除了对偶表之外，还有其他方法可以显示 Total 行吗？

请指导我。

【问题讨论】：

您能否提供一个堆栈闪电战或您的问题的 plunker。

你很快就会添加它。

嘿，@Viqas 感谢您的关注，幸运的是我以不同的方式找到了解决方案，请查看我在此处发布的答案，并为您提供有价值的 cmets。

【参考方案1】：

最后，经过对页脚总行的大量研发，我发现我们可以实现PinnedBootomRow 来显示表格的总和。

所以我放弃了上述想法，因为它会在固定列上产生问题，而且管理 2 个表也很棘手。

感谢 AreYouSiries 在 plucker here987654321@

上提供了这么好的演示

也感谢 Ag-Grid 提供了这么好的文档 live examples

Total Row 我的自定义 Plucker 版本是 here

通过遵循上述示例，我能够实现我的确切要求，现在它按预期工作。

让我添加排序步骤以实现 ag-grid 中的总行功能：

第一步 - 生成固定总行：下面的函数将生成一个空的目标对象，其中所有列都在网格中可用。

generatePinnedBottomData()
        // generate a row-data with null values
    let result = ;

    this.gridColumnApi.getAllGridColumns().forEach(item => 
        result[item.colId] = null;
    );
    return this.calculatePinnedBottomData(result);

第二步计算部分或全部列的总计：您需要根据行数据计算总计，并在上面生成的目标行中设置值。

calculatePinnedBottomData(target: any)
        //console.log(target);
        //**list of columns fo aggregation**
        let columnsWithAggregation = ['age']
        columnsWithAggregation.forEach(element => 
          console.log('element', element);
            this.gridApi.forEachNodeAfterFilter((rowNode: RowNode) => 
              //if(rowNode.index < 10)
                //console.log(rowNode);
              //
                if (rowNode.data[element])
                    target[element] += Number(rowNode.data[element].toFixed(2));
            );
            if (target[element])
                target[element] = `Age Sum: $target[element].toFixed(2)`;
        )
        //console.log(target);
        return target;
    

第三步和最后一步： 调用上面的generatePinnedBottomData() 函数，您可以从 API 或本地数据库获取网格数据。在上面的例子中，我们曾经从onGridReady()调用

onGridReady(params) 
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;
    console.log(this.gridColumnApi.getAllGridColumns())
    this.http
      .get("https://raw.githubusercontent.com/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinners.json")
      .subscribe(data => 
        this.rowData = data;
        setTimeout(()=>
          let pinnedBottomData = this.generatePinnedBottomData();
        this.gridApi.setPinnedBottomRowData([pinnedBottomData]);
        , 500)
      );
  

您需要将生成的数据分配给网格。

就是这样，您现在可以看到您的总行固定在网格底部。

最终输出：

希望我的帖子能帮助你实现网格中的总行数。

【讨论】：

看起来很棒！它不会因当前的过滤器而改变，但修复起来应该相对简单。

【参考方案2】：

Ag-Grid 有一个内置选项，用于创建使用 sum、avg 等聚合函数的组页脚。 在此处查看详细信息： https://www.ag-grid.com/javascript-data-grid/grouping-footers/

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

@AdamJaamour 仅供参考，对于熟悉这个库的人来说，这个答案非常有用。虽然它当然可以从一些示例代码或 JSFiddle 中受益。