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

Question

我正在使用 Ag-Grid table，我想在 table 的页脚中显示总行。我如何通过使用 2 tables 实现它的一些方法 1 用于实际数据，2nd 用于总计行。

它在正常的不可滚动 table 上运行良好，但如果它是固定的或可滚动的 table，则顶部 table 会滚动，但底部的会固定在同一个位置。

我想以相同的偏移量同时滚动 table。

有关更多详细信息，请查看下面的屏幕截图，其中我有总底数 table。

正常Table:

你可以在正常情况下看到 table 它显示完美。

虽然在固定列中 table 它没有按预期工作。

固定列Table:

看table的滚动条。

我想同时滚动 table。

或者除了双 table 之外，还有其他显示总计行的方法吗？

请指导我。

Answer 1

最后，经过对页脚总计行的大量研发，我发现我们可以实现 PinnedBootomRow 来显示 table.

的总计

所以我放弃了上述想法，因为它会导致固定列出现问题，而且管理 2 tables 也很棘手。

感谢 AreYouSiries 在 plucker 上提供了这么好的演示 here

还要感谢 Ag-Grid 与 live examples

一起提供了这么好的文档

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

按照上面的例子，我能够达到我的确切要求，现在它按预期工作。

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

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

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)
      });
  }

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

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

最终输出：

希望我的post能帮助你实现网格中的总行

Answer 2

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

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

How to enable or show total row in footer of ag-grid table

html

css

ag-grid

angular

ag-grid-angular