PrimeNG DataTable自定义排序或过滤(Angular 2)

Question

我在PrimeNg Datatable中排序/过滤日期列时遇到问题.我正在显示日期"dd/mm/yyyy"字符串.

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

Answer 1

我使用moment.js解决了这个问题,因为它更容易,更快,但是如果你想在没有任何框架的情况下做到这一点,总是可以自定义一些代码(我希望在条件和字符串转换时更多)

因此,您必须将moment.js添加到您的项目中:a)通过将src链接添加到您的主html索引文件(主角选择器,polyfills等),来自此站点https://cdnjs.com/libraries/moment. js / b)但如果是生产我建议通过npm添加它.http://momentjs.com/docs/这里有其他可能性.

然后,您必须在import语句和@Component注释上面声明时刻变量

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-column标签显示的日期是DD.MM.YYYY字符串格式,例如:03.01.2017

之后,在我们正在获取并将数据推送到数组的组件中,用于在表中显示数据,在我的名为约会的示例中,我们需要添加名为mysort的函数(因为我们在html p-column标记中调用此函数)

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.然后我们只是比较日期.

只是它,我检查了这个代码,它的工作原理.我希望它会帮助某人,如果解释是用教程风格写的,请原谅我,但这是我的第一个答案,我想以正确的方式做到:)