PrimeNG DataTable 自定义排序或过滤(Angular 2) [英] PrimeNG DataTable Custom Sorting or filtering (Angular 2)

问题描述

我在 PrimeNg 数据表中的排序/过滤日期列中遇到问题.因为我正在显示日期dd/mm/yyyy"字符串.

I am facing issue in sorting/Filtering date column in PrimeNg Datatable.As i am displaying date "dd/mm/yyyy" string .

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

推荐答案

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

I solved this issue using moment.js, because it's easier and faster, but always code can be customized a little bit if You want to do it without any frameworks (i hope few more if conditions, and string conversions)

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

So You have to add moment.js to Your project: a) by adding src link to your main html index file (where is main angular selector, polyfills etc.) from this site https://cdnjs.com/libraries/moment.js/ b) but if it's production i recommend to add it via npm. http://momentjs.com/docs/ here are other possibilities.

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

Then you must declare moment variable under import statements and above @Component annotation

declare var moment;

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

then if u already have primeng module added to Your project, in the html file within primeng's p-dataTable tag there is p-column tag and here within this tag we need to add sortable="custom" and (sortFunction)="mysort($event)" like so:

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

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

Date displayed with p-column tag is in DD.MM.YYYY string format like e.g: 03.01.2017

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

After that in component where we are fetching and pushing data to array, which is used to display data in a table, in my example named appointments we need to add function named mysort (because we are calling this function in html p-column tag)

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

in my example a.date and b.date is a string like "21.12.2016" that we need to format to YYYY-MM-DD. Then we just are comparing dates.

就这样，我检查了这段代码并且它有效.我希望它会帮助某人，如果解释是以教程风格编写的，请原谅我，但这是我的第一个答案，我想以正确的方式来做:)

And just it, i checked this code and it works. I hope it will help someone, and excuse me if explanation was written in tutorial style but this is my first answer and i wanted to do it in the right way :)

这篇关于PrimeNG DataTable 自定义排序或过滤(Angular 2)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！