Question

我在Kendo Grid（Jquery的UI）中有以下专栏，其中有一种基于客户需求的特殊排序方法。

with open(csvfile) as cs:
    reader = csv.DictReader(cs, fieldnames)
    first_row = next(reader)             # skip reading the header line
    for row in reader[:
        csvid = row["ID"]
        data[csvid] = row['summary']     # just store the summary

我已经使用Angular 6在Kendo UI for Angular中构建了相同的网格，除了上面的这种排序方法之外，我已经可以进行所有工作。所有其他列均使用标准排序。

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

我当前的dataStateChange函数：

<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)"
>

是否可以在Kendo UI for 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）] =“ 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();
}

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

Kendo UI for Angular自定义排序网格列

3 个答案: