如何在AngularJS ui-grid的分组网格中显示列页脚？

Posted 2023-03-06

【中文标题】如何在AngularJS ui-grid的分组网格中显示列页脚？

【英文标题】：How to show column footer in grouped grid in AngularJS ui-grid?

【发布时间】：2015-08-12 17:54:58

【问题描述】：

我正在使用 AngularJS ui-grid 并按照 tutorial 显示网格的列页脚，它工作正常。但是，我在网格中添加分组功能后，列脚消失了。

在 105_footer 教程中，我使用它来聚合列值：

aggregationType: uiGridConstants.aggregationTypes.SUM

在分组的列定义中，我将其添加到聚合列值：

treeAggregation: type: uiGridGroupingConstants.aggregation.SUM

【参考方案1】：

问题是列聚合不知道分组，所以它试图盲目地聚合列中所有可见的行。这可能会导致错误的答案。

这里有两种形式的错误：

默认情况下，分组会将标签放入文本中 - 例如年龄列中的“最大：30”。聚合则无法聚合。您可以使用 customFinalizerFn 解决此问题，就像我在下面的 plunker 中所做的那样

聚合只是聚合所有可见行，包括 groupHeader 行。因此，如果您有一个级别的分组，然后扩展所有级别，那么 SUM 聚合最终将是实际值的两倍。如果你有两个级别的分组，那就是三级。

简而言之，我认为在分组中使用列页脚和列级聚合可能是个坏主意。

http://plnkr.co/edit/1znbxELDzeNVK3x3G1c2?p=preview

showGridFooter: true,
showColumnFooter: true,

   name: 'age', treeAggregationType: uiGridGroupingConstants.aggregation.MAX, aggregationType: uiGridConstants.aggregationTypes.avg, width: '20%', customTreeAggregationFinalizerFn: function( aggregation ) aggregation.rendered = aggregation.value;  ,

【参考方案2】：

正如PaulL 在他的answer 中所说，问题的出现是因为列聚合和分组相互之间造成了问题。

这里最好的办法是删除列聚合。如果您使用诸如 SUM 之类的分组，它将自动在 SUM 的页脚中显示列聚合。我无法理解需要使用单独的列聚合。

你可以在Plunker看到这个：

  name: 'age',
  treeAggregationType: uiGridGroupingConstants.aggregation.MAX,
  width: '20%',

注意：如果您不使用列聚合，您甚至不需要使用 customTreeAggregationFinalizerFn。 （但如果使用单元格过滤器，则需要它）