angular-slickgrid，按列分组时排序图标不可见答案

【问题标题】：angular-slickgrid, sort icon not visible on grouping by columnangular-slickgrid，按列分组时排序图标不可见
【发布时间】：2020-03-31 08:54:59
【问题描述】：

我在我的应用程序中使用 angular-slickgrid。网格如下所示：

现在当我按 CEP 代码分组记录时，下面是按 CEP 代码分组的代码：

groupByCEPCode() {
this.dataViewObj.setGrouping({
  getter: 'CEPCODE',
  formatter: (g) => `CEP Code:  ${g.value} <span style='color:green'>(${g.count} item(s))</span>`,
  comparer: (a, b) => Sorters.string(a.value, b.value, SortDirectionNumber.asc),
  aggregateCollapsed: false,
  lazyTotalsCalculation: true    } as Grouping);                                                    
}

分组网格如下所示：

我想达到以下几点：

在按任何字段（例如 CEPCode）进行分组时，该字段将默认显示升序排序图标。（您可以看到排序图标在按此字段分组的 CEP 代码列中不可见）
按 CEP 代码排序时不进行排序（当记录按 CEP 代码分组时）

注意：我为 CEPCode 字段启用了可排序属性。

【问题讨论】：

标签： javascript angular slickgrid

【解决方案1】：

排序图标实际上与排序本身完全分开，图标与实际排序之间没有任何联系。当您直接从列排序时，SortService 将负责添加必要的图标，但是当您通过分组方法（在 SortService 之外）调用它时，您负责添加必要的排序图标。

您可以添加带有 columnId/sortAsc 对数组的排序图标（如果它是降序的，则将布尔值设置为 false）

this.angularGrid.slickGrid.setSortColumns([{ columnId: 'duration', sortAsc: true }]);

如果您调用另一个不需要任何排序图标的分组，您还需要告知网格必须删除图标，您可以通过传递一个空数组来做到这一点

this.angularGrid.slickGrid.setSortColumns([]);

按持续时间升序分组和排序的完整示例，comparer 定义了排序（这又在 SortService 知识之外）

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
    } as Grouping);

    // you need to manually add the sort icon(s) in UI
    this.angularGrid.slickGrid.setSortColumns([{ columnId: 'duration', sortAsc: true }]);
  }

我已更新 Angular-Slickgrid GitHub Demo 页面以反映这一点。

【讨论】：