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 字段啟用了可排序屬性。

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頁面以反映這一點。