Блог

Главная - Вопросы по программированию - Как я могу добавить класс стрелки в заголовок сортировки таблицы?

Как я могу добавить класс стрелки в заголовок сортировки таблицы?

#javascript #angular #typescript #toggle

#javascript #угловой #typescript #переключить

Вопрос:

Я пытаюсь выполнить сортировку в заголовке таблицы. Я могу использовать это https://stackblitz.com/edit/angular-sort-filter но я хотел добавить стрелки при нажатии на заголовок (asc / desc) или, может быть, класс для переключения, который я могу сделать из 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;
      }
    });
  };

Спасибо за вашу помощь.

С Новым годом!

Комментарии:

1. Я не понимаю, какое отношение этот код имеет к стрелкам.

2. Если вы хотите стрелки. Вы могли бы использовать такой сервис, как fontawesome. У них есть хороший выбор бесплатных значков. И вы могли бы вставить их прямо в свой html. fontawesome.com/icons ? d = галерея amp; q= стрелка

Ответ №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>

попробуйте

Ответ №2:

Вы можете создать метод, чтобы получить правильный символ для ваших заголовков

В вашем классе создайте этот метод:

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

В вашем шаблоне измените каждый заголовок так, чтобы он выглядел следующим образом:

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

то же самое для каждого заголовка