angular-slickgrid在分组时隐藏总行

Question

我使用grouping和一个sum聚合器来让它工作，但我实际上并不关心总数或任何其他信息，我只对grouping感兴趣。它工作得很好，但我得到的每个组的总行是空的，这看起来不是很好。有没有办法摆脱它？

看起来似乎解决方案是将displayTotalsRow: false传递给dataView构造函数，这在angular- here中是可行的吗？

谢谢

Answer 1

您在问题中提到的SO答案是错误的，displayTotalsRow不是存在于DataView上的标志，而是存在于组信息(grouping)中的标志，如line of DataView (slick.dataview.js)所示，这在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
        }
      },
  ];
}

分组接口

可以在here中看到带有所有可能的标志/选项的Angular-Slickgrid TypeScript界面

DataView

为了进一步参考，并证明该标志不是有效的DataView选项，如果只查看slick.dataview.js文件的顶部，您将立即在类定义中看到只有两个可用标志作为可接受的DataView选项(如下所示的defaults变量)。因此，看一下内部有时确实会有帮助。

  function DataView(options) {
    var self = this;

    var defaults = {
      groupItemMetadataProvider: null,
      inlineFilters: false
    };
// ...