如何在 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}
问题在于列聚合不了解分组,因此它试图盲目地聚合列中的所有可见行。这可能会导致错误的答案。
这里有两种形式的错误:
默认情况下分组会将标签放入文本中 - 因此 "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; } },
因为 PaulL says in his 列聚合和分组导致彼此出现问题。
这里最好的办法是删除列聚合。如果您使用诸如 SUM 之类的分组,它将自动在 SUM 的页脚中显示列聚合。我不明白需要使用单独的列聚合。
你可以在这个Plunker中看到这个:
{
name: 'age',
treeAggregationType: uiGridGroupingConstants.aggregation.MAX,
width: '20%',
}
注意:如果不使用列聚合,则甚至不需要使用 customTreeAggregationFinalizerFn。 (但如果使用细胞过滤器,你将需要它)
我正在使用 AngularJS ui-grid and followed this tutorial 来显示网格的列页脚,效果很好。但是,在网格中添加分组功能后,列脚消失了。
在 105_footer 教程中,我使用它来聚合列值:
aggregationType: uiGridConstants.aggregationTypes.SUM
在分组的列定义中,我添加了这个来聚合列值:
treeAggregation: {type: uiGridGroupingConstants.aggregation.SUM}
问题在于列聚合不了解分组,因此它试图盲目地聚合列中的所有可见行。这可能会导致错误的答案。
这里有两种形式的错误:
默认情况下分组会将标签放入文本中 - 因此 "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; } },
因为 PaulL says in his
这里最好的办法是删除列聚合。如果您使用诸如 SUM 之类的分组,它将自动在 SUM 的页脚中显示列聚合。我不明白需要使用单独的列聚合。
你可以在这个Plunker中看到这个:
{
name: 'age',
treeAggregationType: uiGridGroupingConstants.aggregation.MAX,
width: '20%',
}
注意:如果不使用列聚合,则甚至不需要使用 customTreeAggregationFinalizerFn。 (但如果使用细胞过滤器,你将需要它)