Question

角度版本：6
表库：ngx-easy-table
图书馆参考链接：
https://stackblitz.com/edit/ngx-easy-table?file=app%2Fcomponents%2Fserver-sort%2Fserver-sort.component.ts
https://github.com/ssuperczynski/ngx-easy-table/wiki

使用上述表库，我想在单击特定列标题/标题时使用自定义排序功能对某些列进行排序。上面提供的stackblitz链接中有一个自定义排序的示例，使我们能够做到这一点，但需要为每列放置一个单独的按钮。

此外，我正在使用<ng-template>来呈现表数据，如下所示：

<ngx-table [configuration]="configuration" [data]="upcomingBookingsList" [columns]="columns" (event)="eventEmitted($event)">
  <ng-template let-row>
    <td>
      <a class="list-id-styles" (click)="openBookingDetailsModal(row['id'])">{{row.id}}</a>
    </td>
    <td>
      {{row.webStatus}}
    </td>
    <td>
      {{row.guestDOB }}
    </td>
    <td>
      {{row.startDateNTime }}
    </td>
    <td>
      {{row.updateDate }}
    </td>
  </ng-template>
</ngx-table>

在此方面获得帮助，太好了！

Answer 1

我是这个图书馆的创建者。解决方法真的很简单。请检查描述此示例的链接here。

您需要签入eventEmitted方法，单击哪个标题键。然后调用您的自定义排序方法，在这种情况下为sortByLastName

eventEmitted($event) {
  if ($event.event === 'onOrder') {
    if ($event.value.key === 'name') {
      this.sortByLastName($event.value.order === 'asc');
    }
}

private sortByLastName(asc: boolean): void {
  this.data = [...this.data.sort((a, b) => {
    const nameA = a.name.toLowerCase().split(' ')[1];
    const nameB = b.name.toLowerCase().split(' ')[1];
    if (nameA < nameB) {
      return asc ? -1 : 1;
    }
    if (nameA > nameB) {
      return asc ? 1 : -1;
    }
    return 0;
  })];
}

如何在列标题单击上使用自定义排序功能，Angular 6 + ngx-easy-table库

1 个答案: