angular-slickgrid，按列分组时不显示排序图标

Question

我在应用程序中使用了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);                                                    
}

在分组网格上如下所示：

我想实现以下几点：

1. 在按任何字段（例如CEPCode）分组时，默认情况下，该字段将显示升序排序图标。（如您所见，按此字段分组时，在CEP代码列中看不到排序图标）
2. 按CEP代码进行排序时（如果记录按CEP代码分组时，则不会进行排序）

注意：我为CEPCode字段启用了sortable属性。

Answer 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页面以反映这一点。