Angular 6 - PrimeNG - 如何按日期对列进行排序? [英] Angular 6 - PrimeNG - how to sort column by Date?

问题描述

我在 Angular 中有一个代码 - PrimeNG 并尝试按日期(其中一列)进行排序:

I have a code in Angular - PrimeNG and trying to make sorting by date (one of the columns):

<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

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

How to sort by Date instead of by String?

谢谢.

推荐答案

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);
    });
}

Primeng 4.3.0

primeng 4.3.0

角 4.3.6

还使用易于使用的 MomentJS :)

also using MomentJS which is easy to use :)

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

I created this myself and have used it extensively. What it does, is when you sort the column, it checks to see whether or not the column you're trying to sort ONLY has dates. And if it does, it will use MomentJS to check values based on chronology. Otherwise it will sort alphabetically. The code for sorting alphabetically comes directly from the primeNG source code, so don't worry about it not functioning correctly :)

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

Also, if you column with dates has some null values in it, those will always be at the bottom, no matter how you sort, up or down.

也感谢提出这个问题的小伙子们:PrimeNG DataTable 自定义排序或过滤(Angular 2)让我开始.

Thanks also to the lads in this question: PrimeNG DataTable Custom Sorting or filtering (Angular 2) for starting me out.

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

Hopefully I've made this clear. Let me know how I can improve my answer if it's unclear, or it doesn't work for you.

这篇关于Angular 6 - PrimeNG - 如何按日期对列进行排序?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！