PrimeNG DataTable 自定义排序或过滤（Angular 2）

Question

我在 PrimeNg 数据表中排序/过滤日期列时遇到问题。当我显示日期“dd/mm/yyyy”字符串时。

1. 如果使用模板显示“dd/mm/yyyy”，则过滤器无法作为过滤器处理日期 ISO 格式的实际数据绑定。
2. 如果从后端将数据转换为字符串格式，则排序不正确，因为它按字符串而不是日期排序。

Answer 1

简单的技巧

<p-column field="StartDate" [editable]="true" header="Start Date">
<ng-template let-col let-car="rowData" pTemplate="body">
 <span>{{car[col.field] | date: '  d,MMM,yyyy'}}</span>
</ng-template>                         
 </p-column>

Answer 2

首先感谢@Relis 提供了一个有用的答案，尽管我已经用它来解决一些不同的问题。 关于这个问题，我相信这可以在没有任何额外的函数和回调的情况下解决，这些函数和回调会强制您在每次单击标题时转换日期。 您只需将模型和表示分离（用于排序和表示的模型以在数据表中显示数据） 假设我们有一个具有日期属性的对象数组：

let dataArray = [{date:'01/02/2016'},{date:'01/02/2017'}]

然后您可以使用附加属性 sortableDate 扩展此数组中的每个对象：

 let dataArray = [{date:'01.02.2016', sortableDate:'2016-02-01'},{date:'01.02.2017', sortableDate:'2017-02-01'}]

对于转换，我还建议使用moment.js。现在您可以使用其中一个属性来显示值并使用另一个属性进行排序：

<p-column [field]="'mySortableDate'" [header]="'Header name' [sortable]="true">
  <ng-template let-col let-data="rowData" pTemplate="body">
    <span>{{data.date}}</span>
  </ng-template>
</p-column>

Answer 3

我用和 Relis 一样的方法解决了这个问题。但是，直到我重新分配了“this.appointments”变量，它才起作用。

  mysort(event) {

     this.appointments.sort((appointmentA, appointmentB) => {

     // Here the property date is a date string with the format 'dd/mm/yyyy'. 
     // In the constructor of moment(), the second paramater is 
     // the format of the string you're passing in.
     const momentA = moment(appointmentA.date, 'dd/mm/yyyy');
     const momentB = moment(appointmentB.date, 'dd/mm/yyyy');

     if(momentB.isBefore(momentA)){
       result = 1;
     }

     return result * event.order;
   });

    // This is the key here.
    this.appointments = [...this.appointments];
    }

Answer 4

我使用 moment.js 解决了这个问题，因为它更容易和更快，但是如果您想在没有任何框架的情况下进行代码定制（我希望更多的 if 条件和字符串转换）

所以您必须将 moment.js 添加到您的项目中： a) 通过从该站点https://cdnjs.com/libraries/moment.js/ 将 src 链接添加到您的主 html 索引文件（主角度选择器、polyfills 等在哪里） b) 但如果是生产，我建议通过 npm 添加它。 http://momentjs.com/docs/ 这里还有其他可能性。

那么你必须在import语句下和@Component注解上面声明moment变量

declare var moment;

然后如果你已经将primeng模块添加到你的项目中，在primeng的p-dataTable标签内的html文件中有p-column标签，在这个标签中我们需要添加sortable =“custom”和（sortFunction）= "mysort($event)" 像这样：

<p-column field="date" header="Data" sortable="custom" (sortFunction)="mysort($event)"></p-column>

使用 p 列标记显示的日期为 DD.MM.YYYY 字符串格式，例如：03.01.2017

之后，在我们获取数据并将数据推送到数组的组件中，该数组用于在表格中显示数据，在我的名为约会的示例中，我们需要添加名为 mysort 的函数（因为我们在 html 中调用此函数 p-列标签）

mysort(event) {
    let comparer = function (a, b): number {
      let formatedA = moment(a.date, "DD.MM.YYYY").format('YYYY-MM-DD');
      let formatedB = moment(b.date, "DD.MM.YYYY").format('YYYY-MM-DD');
      let result: number = -1;

      if (moment(formatedB).isBefore(formatedA, 'day')) result = 1;
      return result * event.order;
    };

    this.appointments.sort(comparer);
}

在我的示例中，a.date 和 b.date 是一个类似于“21.12.2016”的字符串，我们需要将其格式化为 YYYY-MM-DD。然后我们只是比较日期。

就这样，我检查了这段代码，它可以工作。 我希望它会对某人有所帮助，如果解释是用教程风格写的，请原谅，但这是我的第一个答案，我想以正确的方式做:)