angular-slickgrid 在分组时隐藏总行数
angular-slickgrid hide total rows when grouping
我正在使用带有总和聚合器的分组来使其工作,但我实际上并不关心总和或任何其他信息,我只对分组感兴趣。
它工作正常,但我得到每组一个空的总行,这看起来不太好。有办法摆脱它吗?
看起来 here 似乎解决方案是将 displayTotalsRow: false 传递给 dataView 构造函数,angular-slickgrid 是否有可能?
谢谢
您在问题中引用的 SO 答案是错误的,displayTotalsRow
不是 DataView 上存在的标志,而是组信息 (grouping
) 中存在的标志在 DataView (slick.dataview.js
) 的这个 line 上看到并且已经在 Angular-Slickgrid grouping: { getter: 'title', displayTotalsRow: false, aggregators: [...], ... }
中可用
groupByDuration() {
this.dataviewObj.setGrouping({
getter: 'duration',
formatter: (g) => `Duration: ${g.value} <span style="color:green">(${g.count} items)</span>`,
aggregators: [
new Aggregators.Avg('percentComplete'),
new Aggregators.Sum('cost')
],
comparer: (a, b) => Sorters.numeric(a.value, b.value, SortDirectionNumber.asc),
aggregateCollapsed: false,
lazyTotalsCalculation: true,
displayTotalsRow: false, // <<-- HERE is the flag you want to use
} as Grouping);
// you need to manually add the sort icon(s) in UI
this.angularGrid.filterService.setSortColumnIcons([{ columnId: 'duration', sortAsc: true }]);
this.gridObj.invalidate(); // invalidate all rows and re-render
}
或使用可拖动分组
initializeGrid {
this.columnDefinitions = [
{
id: 'title', name: 'Title', field: 'title',
width: 70, minWidth: 50,
cssClass: 'cell-title',
filterable: true,
sortable: true,
grouping: {
getter: 'title',
formatter: (g) => `Title: ${g.value} <span style="color:green">(${g.count} items)</span>`,
aggregators: [
new Aggregators.Sum('cost')
],
displayTotalsRow: false, // <<-- HERE is the flag you want to use
aggregateCollapsed: false,
collapsed: false
}
},
];
}
分组界面
Angular-Slickgrid TypeScript 接口所有可能的 flags/options 都可以看到 here
数据视图
为了进一步参考,并证明该标志不是有效的 DataView 选项,如果您只查看 slick.dataview.js
文件的顶部,您会立即在 class 定义只有 2 个可用标志作为可接受的 DataView 选项(下面显示的 defaults
变量)。所以有时看看内部确实有帮助。
function DataView(options) {
var self = this;
var defaults = {
groupItemMetadataProvider: null,
inlineFilters: false
};
// ...
我正在使用带有总和聚合器的分组来使其工作,但我实际上并不关心总和或任何其他信息,我只对分组感兴趣。 它工作正常,但我得到每组一个空的总行,这看起来不太好。有办法摆脱它吗?
看起来 here 似乎解决方案是将 displayTotalsRow: false 传递给 dataView 构造函数,angular-slickgrid 是否有可能?
谢谢
您在问题中引用的 SO 答案是错误的,displayTotalsRow
不是 DataView 上存在的标志,而是组信息 (grouping
) 中存在的标志在 DataView (slick.dataview.js
) 的这个 line 上看到并且已经在 Angular-Slickgrid grouping: { getter: 'title', displayTotalsRow: false, aggregators: [...], ... }
groupByDuration() {
this.dataviewObj.setGrouping({
getter: 'duration',
formatter: (g) => `Duration: ${g.value} <span style="color:green">(${g.count} items)</span>`,
aggregators: [
new Aggregators.Avg('percentComplete'),
new Aggregators.Sum('cost')
],
comparer: (a, b) => Sorters.numeric(a.value, b.value, SortDirectionNumber.asc),
aggregateCollapsed: false,
lazyTotalsCalculation: true,
displayTotalsRow: false, // <<-- HERE is the flag you want to use
} as Grouping);
// you need to manually add the sort icon(s) in UI
this.angularGrid.filterService.setSortColumnIcons([{ columnId: 'duration', sortAsc: true }]);
this.gridObj.invalidate(); // invalidate all rows and re-render
}
或使用可拖动分组
initializeGrid {
this.columnDefinitions = [
{
id: 'title', name: 'Title', field: 'title',
width: 70, minWidth: 50,
cssClass: 'cell-title',
filterable: true,
sortable: true,
grouping: {
getter: 'title',
formatter: (g) => `Title: ${g.value} <span style="color:green">(${g.count} items)</span>`,
aggregators: [
new Aggregators.Sum('cost')
],
displayTotalsRow: false, // <<-- HERE is the flag you want to use
aggregateCollapsed: false,
collapsed: false
}
},
];
}
分组界面
Angular-Slickgrid TypeScript 接口所有可能的 flags/options 都可以看到 here
数据视图
为了进一步参考,并证明该标志不是有效的 DataView 选项,如果您只查看 slick.dataview.js
文件的顶部,您会立即在 class 定义只有 2 个可用标志作为可接受的 DataView 选项(下面显示的 defaults
变量)。所以有时看看内部确实有帮助。
function DataView(options) {
var self = this;
var defaults = {
groupItemMetadataProvider: null,
inlineFilters: false
};
// ...