自定义标题 Ag-Grid 中的排序数字？答案

【问题标题】：Sorting Number in Custom Header Ag-Grid?自定义标题 Ag-Grid 中的排序数字？
【发布时间】：2020-01-10 03:22:05
【问题描述】：

Ag-grid column api是否有关于自定义标题组件中排序顺序号的信息？

【问题讨论】：

【解决方案1】：

检查这个 plunk：ag-grid: Custom Header component - get sort order

您可以在CustomHeaderComponent 中使用IHeaderParams 获取它。

对Age 的列进行排序，然后按住Shift 对Year 进行排序。您可以看到排序已完成，数组或列正在控制台中以适当的顺序记录。

onSortChanged() {
  console.log(this.params.api.sortController.getColumnsWithSortingOrdered());
}

现在您可以添加逻辑以在自定义标题组件中设置适当的排序顺序。

【讨论】：

嗨，@paritosh 谢谢你的帮助。我已经解决了这个问题并用一个例子创建了 plunker。
我收到 Typescript 错误：属性“sortController”是私有的，只能在“GridApi”类中访问
@HDog 使用(this.params.api as any).sortController.getColumnsWithSortingOrdered()
@Paritosh 请参阅my solution，它正在使用公共 Api 和类型检查。

【解决方案2】：

我们必须将事件监听器附加到网格 api 的 sortChange 事件，而不是列 api 的。这是因为 sortNumber 可能会根据点击不同的列而改变。你可以看到comment to that effect in sourcode of HeaderComp。在下面的示例中，使用网格 api sortChange 的 rxjs fromEvent 创建了一个事件流，该事件流通过管道传输到我对该列的 sortNumber 的自定义计算。

此解决方案使用 ag-grid 的可用公共 API 和类型检查。在当前的 Api 中，我们不应该使用 sort 和 sortedAt，它们是 Column 的私有属性，但我们有 getSort() 和 getSortedAt()。虽然getSortedAt() 没有出现在the documentation of GridColumn 中，但我们直接检查the typings of Column 可以看到它

import { Component, OnDestroy } from '@angular/core';
import { IHeaderAngularComp } from 'ag-grid-angular';
import { AgGridEvent, Column, IHeaderParams } from 'ag-grid-community';
import { Subject , fromEvent } from 'rxjs';
import { takeUntil, tap } from 'rxjs/operators';

@Component({
  selector: 'my-datagrid-header-cell',
  templateUrl: './datagrid-header-cell.component.html',
  styleUrls: ['./datagrid-header-cell.component.scss']
})
export class DatagridHeaderCellComponent implements IHeaderAngularComp, OnDestroy {
    protected destroyed$ = new Subject<void>();
    ngOnDestroy(): void {
        this.destroyed$.next();
    }
    public params: IHeaderParams;
    public sortNumber = 0;
    public showSortNumber = false;

    agInit(params: IHeaderParams): void {
        this.params = params;

        fromEvent(this.params.api, 'sortChanged').pipe(
            takeUntil(this.destroyed$),
            tap((e: AgGridEvent) => this.setMultiSortOrder(e))
        ).subscribe();
    }

    private setMultiSortOrder(e: AgGridEvent) {
        if (!e || !e.columnApi) return;
        let sortedColumns = (e.columnApi.getAllDisplayedColumns() || [])
            .filter((col: Column) => col.getSort())
            .sort((a,b) => a.getSortedAt() - b.getSortedAt());

        this.sortNumber = sortedColumns.findIndex(col => col === this.params.column) + 1;
        this.showSortNumber = this.sortNumber > 0 && sortedColumns.length > 1;
    }
  }

最后，我们可以从标记中调用 sortNumber 显示：

<span ref="eSortOrder"
  class="ag-header-icon ag-sort-order"
  *ngIf="showSortNumber">{{sortNumber}}</span>

Ag-grid 文档参考：

【讨论】：

【解决方案3】：

我已经使用纯 js 解决了这个问题。它可能对某人有用。请在此处查看示例：Angular 2 sorting order ag-grid 我正在使用这种方法来获取排序号并将它们添加到 DOM：

checkSortOrder() {
const sortingArray = this.params.api.getSortModel();
let j: number;
if (sortingArray.length > 1) {
  setTimeout(() => {
    for (j = 0; j < sortingArray.length; j++) {
      this.sortNumber = j + 1;
      const sortingDom = <HTMLElement>document.getElementById('sortingOrder' + sortingArray[j].colId.replace(/\s/g, ''))
      sortingDom.innerHTML = this.sortNumber.toString();
    }
  });
}

}

【讨论】：