Фильтрация TurboTable по датам

У меня есть простая TurboTable, где я показываю некоторые данные, включая даты.

<p-table [value]="boxes" #dt>
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th pSortableColumn="Number">
                Number
                <p-sortIcon field="Number"></p-sortIcon>
            </th>
            <th pSortableColumn="DateInserted">
                Interted at
                <p-sortIcon field="DateInserted"></p-sortIcon>
            </th>
        </tr>
        <tr>
            <th>
            <!-- Here is input to filter number -->
            </th>
            <th>
            <!-- Here I want to use Calendar component to select date range -->
            <p-calendar 
                [(ngModel)]="date"
                selectionMode="range"
                [readonlyInput]="true"
                dateFormat="dd.mm.yy"
                (onSelect)="onDateSelect($event)">
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-box>
        <tr [pSelectableRow]="box">
            <td>{{box.Number}}</td>
            <td>{{box.DateInserted | date}}</td>
        </tr>
    </ng-template>
</p-table>

В настоящее время Turbo Table предлагает только несколько режимов соответствия для использования в фильтрах («startWith», «contains», «endWith», «equals» и «in»). Есть ли возможность фильтровать по дате или диапазонам дат?

Я хочу использовать компонент «Календарь», чтобы выбрать диапазон дат, а затем отфильтровать данные по этим датам. Я использую объекты Date (которые я представляю в таблице с DatePipe). Теперь ни один из этих режимов сопоставления не предлагает возможности правильно сравнивать объекты Date.

Обходной путь - сохранять даты в виде строк, а затем фильтрация работает. Но это не идеальное решение, потому что оно создает проблемы с преобразованием дат в строки, также формат даты должен быть одинаковым везде. Так, может быть, есть лучший вариант для фильтрации по диапазонам дат в TurboTable?


angular primeng primeng-turbotable
person Greggy    schedule 29.03.2018    source источник

Ответы (4)


arrow_upward
9
arrow_downward

В качестве обходного пути вы можете добавить собственное поведение, которое на данный момент довольно просто.

<p-calendar 
    [(ngModel)]="date"
    selectionMode="range"
    [readonlyInput]="true"
    dateFormat="dd.mm.yy"
    (onSelect)="dt.filter($event, 'DateInserted', 'my')">

Затем в своем компоненте вы можете сделать это:

import Table from 'primeng/table';
...
@Component({...})
export MyComponent implements OnInit {
    @ViewChild('dt') private _table: Table;
    ngOnInit(){
        this._table.filterConstraints['my'] = (value, filter): boolean => {
            // Make sure the value and the filter are Dates
            return value.getTime() == filter.getTime();
        }
    }
}
person Cosmin Popescu    schedule 30.03.2018

arrow_upward
10
arrow_downward

Component.html

<p-calendar 
    [(ngModel)]="date"
    selectionMode="range"
    [readonlyInput]="true"
    dateFormat="dd.mm.yy"
    (onSelect)="dt.filter($event, 'DateInserted', 'myCustomFilter')">

Component.ts

PrimeNG 8.0.3 и выше

ошибка TS2339: свойство filterConstraints не существует в типе Table

filterConstraints был заменен в фиксации 658507f на FilterUtils.

import Table from 'primeng/table';
import { FilterUtils } from "primeng/utils";
...
@Component({...})
export MyComponent implements OnInit {
    @ViewChild('dt') private _table: Table;
    ngOnInit(){
        FilterUtils['myCustomFilter'] = (value, filter): boolean => {
            return value.getTime() == filter.getTime();
        }
    }
}

PrimeNG 8.0.2 и ниже

import Table from 'primeng/table';
...
@Component({...})
export MyComponent implements OnInit {
    @ViewChild('dt') private _table: Table;
    ngOnInit(){
        this._table.filterConstraints['myCustomFilter'] = (value, filter): boolean => {
            return value.getTime() == filter.getTime();
        }
    }
}
person Binary Alchemist    schedule 05.11.2019
comment
Говорят, что НЕ нужно импортировать что-либо из primeng/primeng, так как это импортирует всю библиотеку (а затем я получаю ошибки по поводу chart.js и quill.js). См. github.com/primefaces/primeng/issues/. - person Steve; 12.11.2019
comment
вместо этого: import { FilterUtils } from "primeng/api"; - person Steve; 12.11.2019
comment
Ответ здесь является хорошим дополнением для замены содержимого функции фильтрации, этот метод выполняет поиск в диапазоне: stackoverflow.com/questions/50098545/ - person Ivan Lopez; 06.05.2020

arrow_upward
6
arrow_downward

Похоже, что с PrimeNG 8.0.3 свойство filterConstraints в компоненте primeng / table больше не доступно. Я только что обновился с PrimeNG 6 до 8.0.3 и теперь вижу следующее:

ошибка TS2339: свойство filterConstraints не существует в типе Table

в таком коде, как следующий:

    this.mydt.filterConstraints['dateRangeFilter'] = (value, filters): boolean => { ...

Я знаю, что PrimeNG 8 теперь поддерживает фильтрацию по дате, но это фильтр ДИАПАЗОН дат, и мы также выполняем некоторую настраиваемую фильтрацию в других местах. Была ли удалена возможность реализации настраиваемой функции фильтрации в компоненте таблицы PrimeNG?

ПРИМЕЧАНИЕ. Я просмотрел последние изменения на GitHub и увидел, что filterConstraints недавно был преобразован из компонента Table. Я понизил PrimeNG до 8.0.2, и теперь все работает.

person Rob Schripsema    schedule 09.09.2019

arrow_upward
5
arrow_downward

Обновление: для Primeng версии 8.04

Я просто написал собственный фильтр, используя ответ, предоставленный @ binary-alchemist, и некоторые другие ответы после нескольких часов поиска. Это сработало, поэтому я делюсь кодом:

import { FilterUtils } from 'primeng/components/utils/filterutils';
...
...
ngOnInit()
{
    FilterUtils['numberInBetween'] = (value: number, filter: [number, number]) =>
    {
        if (filter === undefined || filter === null)
        {
            return true;
        }

        if (value === undefined || value === null)
        {
            return false;
        }

        return value >= filter[0] && value <= filter[1];
    };
...
...
}
applyFilter(event , dt) {
    // id is the column name , start and end are two numbers , used for filtering id in between them
    dt.filter([start, end], 'id', 'numberInBetween');
}
person Sourav    schedule 16.11.2019