如何在 ag-grid 表的页脚中启用或显示总行 [英] How to enable or show total row in footer of ag-grid table

问题描述

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

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

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

有关更多详细信息，请查看下面的屏幕截图，其中包含总底部表格.

普通表:

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

虽然在固定列表中它没有按预期工作.

固定列表:

看两个表格的滚动条.

我想同时滚动两个表格.

或者除了双表之外还有没有其他方法可以显示Total行?

请指导我.

解决方案

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

所以我放弃了上面的想法，因为它给固定列带来了问题，而且管理 2 个表也很棘手.

感谢 AreYouSiries 在 plucker

希望我的帖子能帮助您实现网格中的总行.

I am working with Ag-Grid table and I want to show the total row in the footer of the table. Some How I achieved it by using 2 tables 1 is for actual data and 2nd is for the Total row.

It's working fine with a Normal non-scrollable table but if it's a pined or scrollable table then the top table scrolls but the bottom one sticks in the same place.

I want to scroll both the table at the same time with the same offset.

For more detail look at the below screenshot which I have the total bottom table.

Normal Table:

You can see in the normal table it's showing total perfectly.

While in the Pinned column table it's not working as expected.

Pinned Column Table:

Look at the scroll bar of both the table.

I want to scroll both the table parallelly.

Or is there any other way to show the Total row other than the dual table?

Please Guide me on this.

解决方案

Finally, after lots of R&D on the footer total row, I found that we can implement PinnedBootomRow to show our total for the table.

So I dropped the above idea as it's creating a problem with the pinned columns and also managing 2 tables is tricky.

Thanks to AreYouSiries who provided such a nice demo on plucker here

Also Thanks to Ag-Grid for such a nice doc with live examples

My Custom Plucker version for Total Row is here

By following the above examples I am able to achieve my exact requirements and Now it's working as expected.

Let me add sort steps to achieve the total row feature in ag-grid:

1st step - Generate Pinned Total Row: Below function will generate an empty target object with all your columns available in the grid.

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

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

2nd step Calculate Total for some or all the columns: You need to calculate the total from row data and set the value in the above generated targeted row.

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

3rd and last step: Call above generatePinnedBottomData() function where u get your grid data from API or local DB. In the above example, we used to call from 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)
      });
  }

You need to assign generated data to the grid.

That's it now you can see your total row pinned at bottom of the grid.

Final Output:

Hope my post will help you to achieve the total row in the grid.

这篇关于如何在 ag-grid 表的页脚中启用或显示总行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！