如何在 table 排序 header 上添加箭头 class？

Question

我正在尝试对 table header 进行排序。我可以利用这个 https://stackblitz.com/edit/angular-sort-filter 但我想在点击 header (asc/desc) 时添加箭头或者 class 来切换我可以从 css.

sort(property) {
    this.isDesc = !this.isDesc; //change the direction    
    this.column = property;
    let direction = this.isDesc ? 1 : -1;

    this.records.sort(function (a, b) {
      if (a[property] < b[property]) {
        return -1 * direction;
      }
      else if (a[property] > b[property]) {
        return 1 * direction;
      }
      else {
        return 0;
      }
    });
  };

感谢您的帮助。

新年快乐！

Answer 1

在css中：

.pointer.active.desc:after {
  content: "▲";
}
.pointer.active.asc:after {
  content: "▼";
}

在模板中：

<div class="form-group">
    <div class="col-md-6">
        <input type="text" [(ngModel)]="searchText"
           class="form-control" placeholder="Search By Category" />
  </div>
    </div>

    <div class="col-md-12">
        <table class="table table-responsive table-hover">
            <tr>
                <th [ngClass]="{pointer: true, active:column=='CategoryID',desc:isDesc, asc:!isDesc}"
                    (click)="sort('CategoryID')">
                    Category ID</th>
                <th [ngClass]="{pointer: true, active:column=='CategoryName',desc:isDesc, asc:!isDesc}"
                    (click)="sort('CategoryName')">
                    Category</th>
                <th [ngClass]="{pointer: true, active:column=='Description',desc:isDesc, asc:!isDesc}"
                    (click)="sort('Description')">
                    Description</th>
            </tr>
            <tr *ngFor="let item of records | category : searchText">
                <td>{{item.CategoryID}}</td>
                <td>{{item.CategoryName}}</td>
                <td>{{item.Description}}</td>
            </tr>
        </table>
    </div>

try

Answer 2

您可以创建一种方法来为您的 headers

获取正确的符号

在您的 class 中，创建此方法：

arrow(columnName) {
  if (this.column === columnName) {
    return this.isDesc ? '&#8593;' : '&#8595;';
  }
  return '';
}

在您的模板中，将每个 header 更改为：

<th class="pointer" (click)="sort('CategoryID')">
    Category ID
    <span [innerHTML]="arrow('CategoryID')"></span>
</th>

每个都一样 header

如何在 table 排序 header 上添加箭头 class？

How can I add arrow class on table sort header?

javascript

toggle

typescript

angular