在角表中对方向和顺序进行排序(上升,下降)



我正在使用lodash按列中对数据进行排序。当我在表列标题中单击箭头时,该特定表列将以升序或降序排序。但是,无论其他列的当前顺序如何,我都希望每列首先按上升顺序排序。目前,我的功能只能切换上升和下降,取决于当前方向,而不论列如何。如何修复此功能?

export class TableComponent {
  @Input() data
  direction: string = ''
  sort(val) {
    if (this.direction === '' || this.direction === 'asc') {
      this.data = _.orderBy(this.data, [val], ['desc'])
      this.direction = 'desc'
    } else {
      this.data = _.orderBy(this.data, [val], ['asc'])
      this.direction = 'asc'
    }
    console.log(this.direction)
  }
}

table.component.ts

<table>
    <thead>
        <tr>
            <th *ngFor="let col of cols">
                {{col.header}}
                <input type="text" 
                [(ngModel)]=fields[col.value] 
                (ngModelChange)="handleFilterChange()" 
                (click)="selectCol(col.value)"
                *ngIf=col.enableFilter/>
                <img 
                class="arrow" 
                (click)="sort(col.value)"/>
            </th>
        </tr>
    </thead>
    <tbody *ngFor="let row of data | filter: filters:selectedCol">
        <tr>
            <td *ngFor="let col of cols">{{row[col.value]}}</td>
        </tr>
    </tbody>
</table>

问题:假设您必须渲染包括客户名称,加入日期,地址,电话等的客户详细信息列表

由于无法对此"加入日期"(加入)列作为日期进行排序,并假设还有另一个隐藏的列以毫秒为单位。

解决方案:为此列使用" CellRenderer"one_answers"比较器"组合。下面代码段是自我解释的。

columnDefs: [{
 headerName: “Join Date”, field: “joinDateInMs”,  
 cellRenderer: function (params) {
                return params.data.joinDate;
             }, 
comparator: self.createDateComparator
},
]
......
//
createDateComparator(date1, date2) {
        return date2 - date1;
    }

最新更新