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

发布时间：2020-12-17 17:58:52 所属栏目：安全来源：网络整理

导读：我在PrimeNg Datatable中排序/过滤日期列时遇到问题.我正在显示日期“dd / mm / yyyy”字符串. 如果使用模板显示“dd / mm / yyyy”,那么过滤器不能用作处理日期ISO格式的实际数据绑定的过滤器. 如果从后端将数据转换为字符串格式,则排序不正确,因为它在字符

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

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

解决方法

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!