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

How to show column footer in grouped grid in AngularJS ui-grid?

我正在使用 AngularJS ui-grid and followed this tutorial 来显示网格的列页脚,效果很好。但是,在网格中添加分组功能后,列脚消失了。

在 105_footer 教程中,我使用它来聚合列值:

aggregationType: uiGridConstants.aggregationTypes.SUM

在分组的列定义中,我添加了这个来聚合列值:

treeAggregation: {type: uiGridGroupingConstants.aggregation.SUM}

问题在于列聚合不了解分组,因此它试图盲目地聚合列中的所有可见行。这可能会导致错误的答案。

这里有两种形式的错误:

  1. 默认情况下分组会将标签放入文本中 - 因此 "Max: 30" 例如在年龄列中。聚合则无法聚合。您可以使用 customFinalizerFn 解决此问题,正如我在下面的 plunker

  2. 中所做的那样
  3. 聚合只是聚合所有可见的行,包括 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; } },

因为 PaulL says in his 列聚合和分组导致彼此出现问题。

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

你可以在这个Plunker中看到这个:

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

注意:如果不使用列聚合,则甚至不需要使用 customTreeAggregationFinalizerFn。 (但如果使用细胞过滤器,你将需要它)