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
    };
// ...