Question

Ag-grid列api是否包含有关自定义标头组件中的排序顺序号的信息？

Answer 1

检查以下小事：ag-grid: Custom Header component - get sort order

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

对列Age进行排序，然后对Year进行排序，同时按住 Shift 。您会看到排序已完成，数组或列正以适当的顺序在控制台中被清除。

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

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

Answer 2

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

此解决方案将ag-grid的可用公共API与类型检查结合使用。在当前的Api中，我们不应该使用Column的私有属性sort和sortedAt，但是我们有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文档参考：

Answer 3

我已使用普通js解决了此问题。对某人可能有用。请在此处检查示例pl：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();
    }
  });
}

}

自定义标题Ag-Grid中的排序编号？

3 个答案: