Kendo Grid按一个字段进行角度自定义排序

Question

我需要按值的绝对值添加一个字段的排序。这是我的组件：

<kendo-grid [kendoGridBinding]="gridData | async"
[filterable]="true"
[pageSize]="10"
[pageable]="true"
[sortable]="true"
[height]="410">
<kendo-grid-column *ngFor="let col of columns"
[field]="col.field"
[title]="col.title"
[filterable]="col.filter"
[filter]="col.type"
[format]="col.format"
[sortable]="col.sortable"

></kendo-grid-column>
</kendo-grid>

这是我的组件类：

export class GridComponent implements OnInit {
gridData: any;
columns = [
{ filter: true,  title: 'Name', field: 'name', type: 'text' },
{ filter: true,  title: 'Date', field: 'date', type: 'date', format: '{0:MM/dd/yyyy}' },
{ filter: true,  title: 'Amount', field: 'amount', type: 'numeric' , sortable: true},
{ filter: true,  title: 'Currency', field: 'currency'}
];
constructor(private dataService: DataService) { }
ngOnInit() {
this.preloadData();
}
private preloadData() {
this.gridData = this.dataService.getData();
}
}

我试着添加可排序的：true this：

sortable: {compare: function(a,b) { return Math.abs(a) > Math.abs(b)} }

然而它告诉我这个函数期望返回boolean。那么，有没有办法实现我自己的比较器？

Answer 1

您需要添加一个sortChange事件处理程序和sort模型：

[sort]="sort"
(sortChange)="sortChange($event)"

并在TS上处理：

public sortChange(sort: SortDescriptor[]): void {
this.sort = sort;
// Custom sort if it the field is amount and there is a direction
if (sort[0].field === "amount" && sort[0].dir) {
this.gridData.data = this.data.sort((a, b) =>
this.amountSortFunction(a, b, sort[0].dir)
);
// If it is amount field but with no direction, then do the default sorting on name
} else if (sort[0].field === "amount") {
this.gridData.data = orderBy(this.data, [{ field: "name", dir: "asc" }]);
// Other fields sorting
} else {
this.gridData.data = orderBy(this.data, sort);
}
}
private amountSortFunction(a, b, direction) {
if (direction === "asc") {
return Math.abs(a.amount) - Math.abs(b.amount);
}
return Math.abs(b.amount) - Math.abs(a.amount);
}

你可以在这里查看演示

请注意，如果有来自服务器端的分页，那么排序/筛选将无法按预期工作，因为它只适用于您拥有的同一页面，而不是所有数据。解决方案是在服务器端实现过滤和排序。因此，如果你想排序/筛选，你会向服务器发送一个请求，要求他这样做，然后响应会被排序/筛选出来，你需要用排序/筛选出的数据替换你的数据。