ignite-ui-angular - 无法从 IgniteUI / igniteui-angular 网格获取排序事件

Question

我需要在网格上应用字母数字排序，但无法从网格中获取排序事件。

标签： ignite-ui-angularigx-grid

Answer 1

可以使用三个事件发射器，主题主题。

• 排序- 在应用排序表达式之前发出

• sortDone - 排序完成后发出

  <igx-grid #grid [data]="localData" [autoGenerate]="true" (sortingDone)="sortingDone($event)">

• sortExpressionsChange - 在执行排序之前发出

使用DefaultSortingStrategy算法进行排序。任何IgxColumnCOmponent或ISortingExpression可以使用ISortingStrategy.

您可以通过扩展默认策略或实现来定义自己的排序策略ISortingStrategy：

1. 示例CustomSortingStrategy

export class CustomSortingStrategy extends DefaultSortingStrategy {
...
}

...
const strategy = CustomSortingStrategy.instance();

grid.sort({fieldName: 'Name', dir: SortingDirection.Asc, ignoreCase: true, strategy: CustomSortingStrategy.instance()});

2. 实施示例ISortingStrategy：

export class SortByParityComponent implements ISortingStrategy {
    public sort(data: any[], fieldName: string, dir: SortingDirection) {
        const key = fieldName;
        const reverse = (dir === SortingDirection.Desc ? -1 : 1);
        const cmpFunc = (obj1, obj2) => this.compareObjects(obj1, obj2, key, reverse);
        return data.sort(cmpFunc);
    }
    protected sortByParity(a: any, b: any) {
        return a % 2 === 0 ? -1 : b % 2 === 0 ? 1 : 0;
    }
    protected compareObjects(obj1, obj2, key: string, reverse: number) {
        const a = obj1[key];
        const b = obj2[key];
        return reverse * this.sortByParity(a, b);
    }
}
...

grid.sort({
    fieldName: 'ID',
    dir: SortingDirection.Desc,
    ignoreCase: false,
    strategy: new SortByParityComponent()
});

在这里，您可以找到使用 CustomSortingStrategy 的工作示例。