Kendo UI 用于 Angular 自定义排序网格列

Question

我在 Kendo 网格中有以下列（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;
  }
}

我在 Kendo UI 中为 Angular 构建了相同的网格，使用 Angular 6，除了这种之外，我已经得到了所有的工作方法同上。所有其他列都使用标准排序。

<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);
}

是否可以在 Kendo UI 中为 Angular 共犯此问题？

Answer 1

因为显然这目前不可用，所以我为我的特定问题写了一个临时解决方案。如果它可能对其他人有帮助，请将其张贴在这里。

在我的网格中我添加了：

(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 对象

Answer 2

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"

Answer 3

添加排序更改如下

    (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();
}

[一个link]https://stackblitz.com/edit/angular-dsmrz2-37jaa5?file=app/app.component.ts

Kendo UI 用于 Angular 自定义排序网格列

Kendo UI for Angular custom sorting grid column

kendo-ui

typescript

kendo-ui-angular2

angular