angular-slickgrid 分组时隐藏总行数答案

【问题标题】：angular-slickgrid hide total rows when groupingangular-slickgrid 分组时隐藏总行数
【发布时间】：2020-07-31 17:15:50
【问题描述】：

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

看起来here 似乎解决方案是将 displayTotalsRow: false 传递给 dataView 构造函数，这是否有可能使用 angular-slickgrid ？

谢谢

【问题讨论】：

不，该标志在 Angular-Slickgrid 中不可用，您可以提交 PR，您可以修改此 line 以添加您的 displayTotalsRow?: boolean 并修改此 line 以使用它 @987654326 @
所以我正要考虑在 Angular-Slickgrid 中添加它，发现您看到的答案完全错误，displayTotalsRow 是组信息中存在的标志，如上所示这个line，所以这已经在Angular-Slickgrid中可用了grouping: { getter: 'title', displayTotalsRow: false, aggregators: [...], ... }

标签： angular angular-slickgrid

【解决方案1】：

您在问题中引用的 SO 答案是错误的，displayTotalsRow 不是 DataView 上存在的标志，而是组信息 (grouping) 中存在的标志，如 line 所示的 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
        }
      },
  ];
}

分组接口

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

数据视图

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

  function DataView(options) {
    var self = this;

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

【讨论】：

嘿，这确实有效！我查看了这些文件以尝试找到设置它的位置，但不知何故，我一定在您链接的文件中错过了它，对此感到抱歉。感谢您的帮助！
很高兴我能提供帮助，如果你还没有这样做，如果你喜欢我的库，你可以投票赞成，这就是我所要求的回报 ;)