Question

假设我有一张桌子而且我正在提供一份客户名单。也许其中一个参数是一个地址对象，其中包含诸如city，state，zip等参数。我可以轻松地将任何这些值出现在表中（例如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的涡轮增压表实现这样的效果？

Answer 1

在即将到来的里程碑尝试解决related custom filter feature request之前，我不认为可以使用类似于材料2方法的自定义过滤器。

您可以将原始表数据对象转换或扩展为表数据的特定于PrimeNG的对象表示，其中每个列定义（或其他列表）是您想要的展平/连接/ CSV（等）表示使用PrimeNG DataTable / TurboTable filterMatchMode类型进行过滤。

您可能无法显示实际的过滤器友好col def值。相反，您可以从ng-templates中相关的原始表数据对象值中渲染您喜欢的内容，这些值可以打开过滤器友好的列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的{{1}}我可以用两个CSV字符串中的一个替换，这两个字符串代表一系列典型的布尔值，人们可以在其中键入PrimeNG表格过滤器输入设置为enabledProduct filterMatchMode contains或0,n,no,off,false,disabled，但所有可视化显示的内容都是已启用项目的巨大复选标记图标。

（我通常使用文档中列出的PrimeNG＆＃39;动态列＆＃39;方法。）

Answer 2

您可以使用primeng globalfilter轻松访问复杂的对象通过这种方式：在p表上添加服装属性[globalFilterFields]，并用列标题数组填充它-接受点真棒！这样您就可以深入复杂的对象

<p-table [globalFilterFields]="['notes','price','carType.name','nameOfCustomer']" >

过滤PrimeNG Turbo Table中的复杂对象

2 个答案: