Angular 6 - PrimeNG - 如何按日期对列进行排序？

Question

我在 Angular - PrimeNG 中有一个代码，并尝试按日期（其中一列）进行排序：

<p-table
  [columns]="cols"
  [value]="questions"
  selectionMode="single"
  [(selection)]="selectedQuestion"
  (onRowSelect)="onRowSelect($event)"
  [paginator]="true"
  [rows]="20">

  <ng-template pTemplate="header" let-columns>
    <tr>
      <th *ngFor="let col of columns">
      </th>
    </tr>
  </ng-template>

  <ng-template 
    pTemplate="body" 
    let-rowData 
    let-columns="columns">
    <tr [pSelectableRow]="rowData">
      <td *ngFor="let col of columns">
        {{rowData[col.field]}}
      </td>
    </tr>
  </ng-template>

</p-table>

其中一列日期是：
6/26/18
7/26/17

如何按日期而不是字符串排序？

谢谢。

Answer 1

我添加了一个使用 MomentJs 制定的规则，它对我来说效果很好。当我尝试使用任何类型的数据或字符串对列进行排序时，它解决了我的问题。

if (value1 == null && value2 != null) {
    result = -1;
  } else if (value1 != null && value2 == null) {
    result = 1;
  } else if (value1 == null && value2 == null) {
    result = 0;
  } else if (typeof value1 === 'string' && typeof value2 === 'string') {

    let test = value1.substr(2,1)

    let date1 = moment(value1, 'DD-MM-YYYY')
    let date2 = moment(value2, 'DD-MM-YYYY')
    if(test == '-' || test == '/'){
      result = date1.diff(date2, 'days')
    }else{
      result = value1.localeCompare(value2);
    }

  }else {
    result = (value1 < value2) ? -1 : (value1 > value2) ? 1 : 0;
  }

Answer 2

HTML：

<p-dataTable
    [value]="table.rows"
    (onSort)="sortColumn($event)">

    <p-column
        *ngFor="let column of table.columns"
        [field]="column.field"
        [header]="column.header"
        sortable="custom"> 
    // All your columns and stuff and your data and all that </p-column>

</p-dataTable>

TS：

// Add this line at the end of your imports, before the @Component annotation:
import * as moment from 'moment';
// If that doesn't work, you may have to add this instead:
const moment = require('moment');

// Then, in your component body add this:

public dateFieldFormat:string = 'MM/DD/YYYY';
public table; //Assuming this is the data you're passing in. Some sort of JSON with an array of rows and an array of columns

isDateColumn(columnTitle: string) {
    for (const row of this.table.rows) {
      const value = row[columnTitle];
      if (!moment(value, this.dateFieldFormat).isValid() && value !== null) {
        return false;
      }
    }
    return true;
}

sortColumn(eventPayload: any): void {
    this.sort(eventPayload);
    this.table.rows = [...this.table.rows];
}

sort(event: any): Array<any> {
    return this.table.rows.sort((item1, item2) => {
      const value1: string = item1[event.field];
      const value2: string = item2[event.field];

      if (value1 === null) {
        return 1;
      }

      if (this.isDateColumn(event.field)) {
        const date1 = moment(value1, this.dateFieldFormat);
        const date2 = moment(value2, this.dateFieldFormat);

        let result: number = -1;
        if (moment(date2).isBefore(date1, 'day')) { result = 1; }

        return result * event.order;
      }

      let result = null;

      if (value1 == null && value2 != null) {
        result = -1;
      } else if (value1 != null && value2 == null) {
        result = 1;
      } else if (value1 == null && value2 == null) {
        result = 0;
      } else if (typeof value1 === 'string' && typeof value2 === 'string') {
        result = value1.localeCompare(value2);
      } else {
        result = (value1 < value2) ? -1 : (value1 > value2) ? 1 : 0;
      }

      return (event.order * result);
    });
}

启动 4.3.0

Angular 4.3.6

也使用MomentJS，这很容易使用:)

我自己创建并广泛使用它。它的作用是，当您对列进行排序时，它会检查您尝试排序的列是否仅具有日期。如果是这样，它将使用 MomentJS 根据年表检查值。否则它将按字母顺序排序。按字母顺序排序的代码直接来自 primeNG 源代码，所以不用担心它不能正常运行:)

此外，如果您的日期列中包含一些空值，则无论您如何排序、向上或向下，这些值将始终位于底部。

还要感谢这个问题的小伙子： PrimeNG DataTable Custom Sorting or filtering (Angular 2) 让我开始。

希望我已经说清楚了。如果不清楚，或者对您不起作用，请告诉我如何改进我的答案。