时间戳

首页 > 解决方案 > 表格排序实现

angular - 表格排序实现

问题描述

我使用ngx-order-pipe库对表格进行排序。问题是上下图标发生变化，排序本身不起作用。它没有给出任何错误。

html:

<table class="centered highlight" *ngIf="filteredMasters.length !== 0" style="cursor: pointer">
  <thead>
    <tr>
      <th [class.active]="order === 'full_name'" (click)="setOrder('full_name')">Full Name <span [hidden]="reverse">▼&lt;/span><span [hidden]="!reverse">▲&lt;/span></th>
      <th [class.active]="order === 'date_work'" (click)="setOrder('date_work')">Date <span [hidden]="reverse">▼&lt;/span><span [hidden]="!reverse">▲&lt;/span></th>
      <th [class.active]="order === 'comment'" (click)="setOrder('comment')">Comment <span [hidden]="reverse">▼&lt;/span><span [hidden]="!reverse">▲&lt;/span></th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody >
    <tr *ngFor="let master of filteredMasters | orderBy: order:reverse">
      <td>{{master.full_name}}</td>
      <td>{{master.date_work | date: 'dd.MM.yyyy'}}</td>
      <td>{{master.comment}}</td>
      <td><a class="btn-floating btn-small waves-effect waves-light"><i class="fa fa-edit" (click)="onSelectMaster(master)"></i></a></td>
      <td><a class="btn-floating btn-small waves-effect waves-light red"><i class="fa fa-trash" (click)="deleteMaster(master)"></i></a></td>
    </tr>
  </tbody>
</table>

ts：

  order: string = 'full_name'
  reverse = false

  setOrder(order) {
    this.order = order;
    this.reverse = !this.reverse;
  }

标签： angular

解决方案

请在您的管道中添加“不区分大小写”。否则，“ full_name ”、“ comment ”既有大写也有小写，那么你会得到两种排序，一种会得到一堆“小写”和“大写”排序的记录。

  1. 将排序字母开始将“小写”然后它将显示以“大写”开头的记录。-- 在DESC排序的情况下

  2. 将排序字母开始将“大写”然后它将显示以“小写”开头的记录。-- 在 ASC 排序的情况下

更新后的代码如下。

<table class="centered highlight" *ngIf="filteredMasters.length !== 0" style="cursor: pointer">
  <thead>
    <tr>
      <th [class.active]="order === 'full_name'" (click)="setOrder('full_name')">Full Name <span [hidden]="reverse">▼&lt;/span><span [hidden]="!reverse">▲&lt;/span></th>
      <th [class.active]="order === 'date_work'" (click)="setOrder('date_work')">Date <span [hidden]="reverse">▼&lt;/span><span [hidden]="!reverse">▲&lt;/span></th>
      <th [class.active]="order === 'comment'" (click)="setOrder('comment')">Comment <span [hidden]="reverse">▼&lt;/span><span [hidden]="!reverse">▲&lt;/span></th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody >
    <tr *ngFor="let master of filteredMasters | orderBy: order:reverse:'case-insensitive'">
      <td>{{master.full_name}}</td>
      <td>{{master.date_work | date: 'dd.MM.yyyy'}}</td>
      <td>{{master.comment}}</td>
      <td><a class="btn-floating btn-small waves-effect waves-light"><i class="fa fa-edit" (click)="onSelectMaster(master)"></i></a></td>
      <td><a class="btn-floating btn-small waves-effect waves-light red"><i class="fa fa-trash" (click)="deleteMaster(master)"></i></a></td>
    </tr>
  </tbody>
</table>

推荐阅读