표 머리글 정렬을 시도하고 있습니다. 이 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;
}
});
};
당신의 도움을 주셔서 감사합니다.
새해 복 많이 받으세요!
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>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다