Angular 自定义排序网格列的 Kendo UI答案

【问题标题】：Kendo UI for Angular custom sorting grid columnAngular 自定义排序网格列的 Kendo UI
【发布时间】：2018-12-03 22:36:58
【问题描述】：

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

是否可以在 Kendo UI for Angular 中实现这一点？

【问题讨论】：

目前无法提供自定义compare 函数。但UserVoice Portal 中已有一张票，您可以投票。

标签： angular typescript kendo-ui kendo-ui-angular2

【解决方案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 对象

【讨论】：

【解决方案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 中进行排序，例如： [(排序)]="排序"

【讨论】：

【解决方案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();
}

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

【讨论】：