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

Question

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

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

Answer 1

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

Так Вы должны добавить moment.js к вашему проекту: а) путем добавления Src ссылку на ваш основной файл индекса HTML (где главный угловой селектор, polyfills и т.д.) с этого сайта https://cdnjs.com/libraries/moment.js/ б), но если это производство, я рекомендую добавить его через npm. http://momentjs.com/docs/ вот и другие возможности.

Тогда вы должны объявить переменную момент под операторы импорта и выше @Component аннотацию

declare var moment; 

тогда, если и уже primeng модуль добавлен в Ваш проект, в HTML файл в р-DataTable тег primeng там р -column тегов и здесь в пределах этого тега нам нужно добавить Сортируемый = «обычай» и (sortFunction) = «mysort ($ событие)» как так:

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

Дата отображается с п столбцов тега в 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. Затем мы просто сравниваем даты.

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

Answer 2

Я решил это так же, как Relis. Однако это не сработало, пока я не переназначил переменную «this.prointments».

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 3

Сначала спасибо @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 4

Просто Trick

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