Question

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

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

aggregationType: uiGridConstants.aggregationTypes.SUM

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

treeAggregation: {type: uiGridGroupingConstants.aggregation.SUM}

Answer 1

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

这里有两种形式的错误：

默认情况下，分组会将标签放入文本中 - 例如，年龄列中的“Max：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; } },

Answer 2

正如PaulL在他的answer中所说，问题出现了，因为列聚合和分组会导致彼此出现问题。

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

您可以在此Plunker中看到这一点：

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

注意：如果您不使用列聚合，则甚至不需要使用customTreeAggregationFinalizerFn。（但如果使用细胞过滤器，你将需要它）

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

2 个答案: