The ui-grid
example on the official website ( http://ui-grid.info/docs/#/tutorial/209_grouping ) presents a grouping feature, which looks like this:
官方网站上的ui-grid示例(http://ui-grid.info/docs/#/tutorial/209_grouping)提供了一个分组功能,如下所示:
I would like to have the Grouping
menu item, but not have the Aggregate
ones (count, sum, max, min, avg) in the column menu and I couldn't find a way around removing them.
我想有分组菜单项,但没有列菜单中的聚合(计数,总和,最大,最小,平均),我找不到删除它们的方法。
A solution I've tried was overriding the uiGridGroupingService
, by providing a decorator for the groupingColumnBuilder, but the service is not resolved at all and I can't help but wonder if there is a simpler way of achieving this.
我尝试过的解决方案是通过为groupingColumnBuilder提供装饰器来覆盖uiGridGroupingService,但是服务根本没有解决,我不禁想知道是否有更简单的方法来实现这一点。
Is anyone aware of any solution for this problem?
有谁知道这个问题的任何解决方案?
3 个解决方案
#1
2
The decorator approach is probably the best approach in this case. There are no config option to remove this from the column menu.
在这种情况下,装饰器方法可能是最好的方法。没有配置选项可以从列菜单中删除它。
PS: The decorator is only shown to remove the aggregate items.
PS:装饰器仅显示删除聚合项目。
Here is a working plnkr with the decorator approach.
这是一个带有装饰器方法的工作plnkr。
http://plnkr.co/edit/nzBeqbmEVUwmZF0qgyd6?p=preview
http://plnkr.co/edit/nzBeqbmEVUwmZF0qgyd6?p=preview
app.config(function($provide){
$provide.decorator('uiGridGroupingService', function ($delegate,i18nService,gridUtil) {
$delegate.groupingColumnBuilder = function (colDef, col, gridOptions) {
if (colDef.enableGrouping === false){
return;
}
if ( typeof(col.grouping) === 'undefined' && typeof(colDef.grouping) !== 'undefined') {
col.grouping = angular.copy(colDef.grouping);
} else if (typeof(col.grouping) === 'undefined'){
col.grouping = {};
}
if (typeof(col.grouping) !== 'undefined' && typeof(col.grouping.groupPriority) !== undefined && col.grouping.groupPriority >= 0){
col.suppressRemoveSort = true;
}
col.groupingSuppressAggregationText = colDef.groupingSuppressAggregationText === true;
var groupColumn = {
name: 'ui.grid.grouping.group',
title: i18nService.get().grouping.group,
icon: 'ui-grid-icon-indent-right',
shown: function () {
return typeof(this.context.col.grouping) === 'undefined' ||
typeof(this.context.col.grouping.groupPriority) === 'undefined' ||
this.context.col.grouping.groupPriority < 0;
},
action: function () {
service.groupColumn( this.context.col.grid, this.context.col );
}
};
var ungroupColumn = {
name: 'ui.grid.grouping.ungroup',
title: i18nService.get().grouping.ungroup,
icon: 'ui-grid-icon-indent-left',
shown: function () {
return typeof(this.context.col.grouping) !== 'undefined' &&
typeof(this.context.col.grouping.groupPriority) !== 'undefined' &&
this.context.col.grouping.groupPriority >= 0;
},
action: function () {
service.ungroupColumn( this.context.col.grid, this.context.col );
}
};
if (!gridUtil.arrayContainsObjectWithProperty(col.menuItems, 'name', 'ui.grid.grouping.group')) {
col.menuItems.push(groupColumn);
}
if (!gridUtil.arrayContainsObjectWithProperty(col.menuItems, 'name', 'ui.grid.grouping.ungroup')) {
col.menuItems.push(ungroupColumn);
}
}
return $delegate;
})
});
#2
13
It's set to true by default so you need to specify it in your columnDefs
它默认设置为true,因此您需要在columnDefs中指定它
groupingShowAggregationMenu: false
groupingShowAggregationMenu:false
#3
6
There is a suppress aggregation option! Set groupingShowAggregationMenu
to false.
有一个抑制聚合选项!将groupingShowAggregationMenu设置为false。
#1
2
The decorator approach is probably the best approach in this case. There are no config option to remove this from the column menu.
在这种情况下,装饰器方法可能是最好的方法。没有配置选项可以从列菜单中删除它。
PS: The decorator is only shown to remove the aggregate items.
PS:装饰器仅显示删除聚合项目。
Here is a working plnkr with the decorator approach.
这是一个带有装饰器方法的工作plnkr。
http://plnkr.co/edit/nzBeqbmEVUwmZF0qgyd6?p=preview
http://plnkr.co/edit/nzBeqbmEVUwmZF0qgyd6?p=preview
app.config(function($provide){
$provide.decorator('uiGridGroupingService', function ($delegate,i18nService,gridUtil) {
$delegate.groupingColumnBuilder = function (colDef, col, gridOptions) {
if (colDef.enableGrouping === false){
return;
}
if ( typeof(col.grouping) === 'undefined' && typeof(colDef.grouping) !== 'undefined') {
col.grouping = angular.copy(colDef.grouping);
} else if (typeof(col.grouping) === 'undefined'){
col.grouping = {};
}
if (typeof(col.grouping) !== 'undefined' && typeof(col.grouping.groupPriority) !== undefined && col.grouping.groupPriority >= 0){
col.suppressRemoveSort = true;
}
col.groupingSuppressAggregationText = colDef.groupingSuppressAggregationText === true;
var groupColumn = {
name: 'ui.grid.grouping.group',
title: i18nService.get().grouping.group,
icon: 'ui-grid-icon-indent-right',
shown: function () {
return typeof(this.context.col.grouping) === 'undefined' ||
typeof(this.context.col.grouping.groupPriority) === 'undefined' ||
this.context.col.grouping.groupPriority < 0;
},
action: function () {
service.groupColumn( this.context.col.grid, this.context.col );
}
};
var ungroupColumn = {
name: 'ui.grid.grouping.ungroup',
title: i18nService.get().grouping.ungroup,
icon: 'ui-grid-icon-indent-left',
shown: function () {
return typeof(this.context.col.grouping) !== 'undefined' &&
typeof(this.context.col.grouping.groupPriority) !== 'undefined' &&
this.context.col.grouping.groupPriority >= 0;
},
action: function () {
service.ungroupColumn( this.context.col.grid, this.context.col );
}
};
if (!gridUtil.arrayContainsObjectWithProperty(col.menuItems, 'name', 'ui.grid.grouping.group')) {
col.menuItems.push(groupColumn);
}
if (!gridUtil.arrayContainsObjectWithProperty(col.menuItems, 'name', 'ui.grid.grouping.ungroup')) {
col.menuItems.push(ungroupColumn);
}
}
return $delegate;
})
});
#2
13
It's set to true by default so you need to specify it in your columnDefs
它默认设置为true,因此您需要在columnDefs中指定它
groupingShowAggregationMenu: false
groupingShowAggregationMenu:false
#3
6
There is a suppress aggregation option! Set groupingShowAggregationMenu
to false.
有一个抑制聚合选项!将groupingShowAggregationMenu设置为false。