PrimeNG DataTable пользовательская сортировка или фильтрация (угловой 2)

Question

PrimeNG DataTable пользовательская сортировка или фильтрация (угловой 2)

Я столкнулся с проблемой сортировки / фильтрации столбца даты в PrimeNg Datatable.As я показываю строку даты "dd/mm/yyyy".

Если используется шаблон для отображения "dd / mm/yyyy", то фильтр не работает как фильтр, работающий на фактической привязке данных, которая находится в формате даты ISO.

если преобразовать данные в строковый формат из задней части, то сортировка не является правильной, так как она сортирует по строке вместо даты.

653 4

angular datatable primeng

4 ответов:

Comments

Ничего не найдено.

Relis · Accepted Answer · 2017-01-03 22:59:49

Я решил эту проблему, используя момент.js, потому что это проще и быстрее, но всегда код можно немного настроить, если вы хотите сделать это без каких-либо рамок (я надеюсь, что еще несколько условий if и преобразования строк)

Поэтому вы должны добавить момент.JS для вашего проекта: а) путем добавления ссылки src в ваш основной HTML-индексный файл (где находится main angular selector, polyfills и т. д.) с этого сайта https://cdnjs.com/libraries/moment.js/ Б) но если это производство, я рекомендую добавить его через НПМ. http://momentjs.com/docs/ вот другие возможности.

Затем необходимо объявить переменную moment в операторах import и над аннотацией @Component
declare var moment;
Тогда, если у вас уже есть модуль primeng, добавленный в ваш проект, в html-файле в теге P-dataTable primeng есть тег 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", которую нужно отформатировать в гггг-ММ-ДД. Тогда мы просто сравниваем даты.

И только это, я проверил этот код и его завод. Я надеюсь, что это поможет кому-то, и извините меня, если объяснение было написано в стиле учебника, но это мой первый ответ, и я хотел сделать это правильно:)

jriver27 · Accepted Answer · 2017-08-07 20:50:37

Я решил ее таким же образом, как Релис. Однако это не сработало, пока я не переназначил "это.встречи " переменная.

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

nitoloz · Accepted Answer · 2017-08-30 17:23:57

Сначала поблагодарите @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'}]
Для трансформации я также предлагаю использовать момент .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>

Sachin from Pune · Accepted Answer · 2017-12-01 22:59:27

Просто Трюк

<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>