Фильтрация сложных объектов в таблице PrimeNG Turbo

Допустим, у меня есть стол, и я вытаскиваю список клиентов. Возможно, одним из параметров является адресный объект, который содержит такие параметры, как город, штат, почтовый индекс и т. Д. Я могу легко сделать так, чтобы любое из этих значений появилось в таблице (например, client.address.city), но поскольку они являются частью адресного объекта, я я не могу фильтровать или сортировать по этим значениям.

В настоящее время это то, что предлагает Material 2 для выравнивания данных, давая пользователям возможность фильтровать / сортировать.

this.dataSource.filterPredicate = (client: Client, filter) => {
        let dataStr = client.step + client.name + client.interest.industry + client.interest.package + client.address.city + client.address.state + client.origin;
        return dataStr.toLowerCase().indexOf(filter) != -1; 
      }

Как я могу добиться чего-то подобного с помощью турбо-таблицы Primeng?


google-cloud-firestore angular filter primeng primeng-turbotable
person Kyle Abens    schedule 10.04.2018    source источник

Ответы (2)


arrow_upward
2
arrow_downward

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

Вы можете преобразовать или расширить исходный объект данных таблицы в объектное представление данных вашей таблицы, специфичное для PrimeNG, где каждое определение столбца (или дополнительные определения столбцов являются) сглаженным / конкатенированным / CSV (и т. Д.) Представлением, которое вы хотите отфильтровать, используя PrimeNG DataTable / TurboTable filterMatchMode типы.

Вы, вероятно, не будете отображать фактическое значение col def, удобное для фильтра. Вместо этого вы должны визуализировать то, что вам нравится, из значений связанных исходных объектов данных таблицы внутри ng-шаблонов, которые включают удобное для фильтра имя поля def столбца.

Я использую этот подход для фильтрации нескольких значений, которые должны отображаться в одной ячейке таблицы для строки, например валютные цены на один товар. Я отображаю составные блоки div в таблице, но разрешаю фильтрацию, как если бы они были списком значений CSV.

            // This is actually PrimeNG DataTable but TurboTable approach is similar

            <ng-template *ngIf="col.field === 'csvPriceCurrencyCodes'" let-data="rowData" pTemplate="body">
                <div *ngFor="let price of data?.prices">
                    {{ price?.currency }}
                </div>
            </ng-template>

            <ng-template *ngIf="col.field === 'csvPriceAmounts'" let-data="rowData" pTemplate="body">
                <div *ngFor="let price of data?.prices">
                    {{ price?.price | delimitNumber:2 }}
                </div>
            </ng-template>

Другой пример - col.field с именем типа enabledProduct, которое я могу заменить одной из двух строк CSV, представляющих диапазон типичных логических значений, которые люди могут вводить во входные данные фильтра таблицы PrimeNG, для которых установлено значение filterMatchMode contains либо 0,n,no,off,false,disabled, либо 1,y,yes,on,true,enabled, но все визуально отображается в виде гигантского значка галочки для включенных элементов.

(Обычно я использую подход PrimeNG «Динамические столбцы», указанный в документации.)

person jmmygoggle    schedule 25.04.2018
comment
Спасибо тебе за это! В итоге я выровнял данные, поступающие специально для сортировки / фильтрации, и это помогло. - person Kyle Abens; 26.04.2018

arrow_upward
0
arrow_downward

вы можете легко получить доступ к сложному объекту с помощью primeng globalfilter таким образом: добавьте в p-таблицу атрибут костюма [globalFilterFields] и заполните его массивом заголовков столбцов - и что это за классный прием точек !!! так что вы можете углубиться в сложный объект

<p-table [globalFilterFields]="['notes','price','carType.name','nameOfCustomer']" >
person yehonatan yehezkel    schedule 10.10.2018