[英]Kendo UI for Angular custom sorting grid column
我在 Kendo Grid(Jquery 的 UI)中有以下列,它根据客户的需要使用特殊的排序方法。
field: "daysLeft",
title: "Accessible",
width: 130,
sortable: {
compare: function (a, b, descending) {
if (a.daysLeft == 'Not started') return 1;
if (b.daysLeft == 'Not started') return -1;
if (a.end < b.end) return -1;
if (a.end > b.end) return +1;
return 0;
}
}
我已经使用 Angular 6 在 Kendo UI 中为 Angular 构建了相同的网格,并且除了上面的这种排序方法之外,我已经让所有东西都能正常工作。 所有其他列都使用标准排序。
<kendo-grid class="m-2"
[data]="view"
[pageSize]="pageSize"
[skip]="skip"
[pageable]="gridSettings()"
filterable = "menu"
[filter]="state.filter"
[height]="450"
[sortable]="{
allowUnsort: true,
mode: multiple ? 'multiple' : 'single'
}"
[sort]="state.sort"
(pageChange)="pageChange($event)"
(dataStateChange)="dataStateChange($event)"
>
我当前的 dataStateChange 函数:
public dataStateChange(state: DataStateChangeEvent): void {
this.state = state;
this.view = process(this.items, this.state);
}
是否可以在 Angular 的 Kendo UI 中实现这一点?
因为显然这目前不可用,所以我为我的特定问题编写了一个临时解决方案。 如果它可以帮助其他人,请在此处发布。
在我的网格中,我添加了:
(sortChange)="sortChange($event)"
我的 sortChange 函数如下所示:
public sortChange(sort: SortDescriptor[]): void {
sort.map((item) =>
{
if (item.field == "daysLeft")
{
if(item.dir === undefined) this.view.data === this.items;
var data = this.view.data.sort((a, b) => {
var aend = parseInt(a.end.substr(6));
var bend = parseInt(b.end.substr(6));
if (a.daysLeft == 'Not started') return +1;
if (b.daysLeft == 'Not started') return -1;
if (aend < bend) return -1;
if (aend > bend) return +1;
return 0;
});
if(item.dir === "desc") {
data = data.reverse();
}
this.view.data = data;
}
});
}
this.view 是我的 GridDataResult 对象
h3li0s 的回答帮助了我很多,不过它需要一些调整:
public sortChange(sort: SortDescriptor[]): void {
sort.map((item) =>
{
if (item.field == "daysLeft")
{
if (item.dir === undefined) {
this.view.data = this.items;
} else {
var data = this.view.data.sort((a, b) => {
var aend = parseInt(a.end.substr(6));
var bend = parseInt(b.end.substr(6));
if (a.daysLeft == 'Not started') return +1;
if (b.daysLeft == 'Not started') return -1;
if (aend < bend) return -1;
if (aend > bend) return +1;
return 0;
});
if (item.dir === "desc") {
data = data.reverse();
}
this.view.data = data;
this.sort["dir"] = item.dir;
} else {
this.sort = sort;
this.loadData();
}
});
}
并且不要忘记将香蕉放在一个用于数据的框中并在 html 中进行排序,例如:[(sort)]="sort"
添加排序更改如下
(sortChange)="sortChange($event)"
并在下面的列表中添加需要先降序而不是升序的列
public resortColumn:any[] =['UnitPrice'];
定义排序更改功能如下
public sortChange(sort: SortDescriptor[]): void {
if(this.resortColumn.indexOf(sort[0].field) != -1 )
{
if(sort[0].dir == "desc")
{
sort[0].dir = undefined;
}
else if(sort[0].dir == "asc")
{
sort[0].dir = "desc";
}
else if(sort[0].dir == undefined)
{
sort[0].dir = "asc";
}
}
this.sort = sort;
this.loadProducts();
}
[链接] https://stackblitz.com/edit/angular-dsmrz2-37jaa5?file=app/app.component.ts
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.