1

假设我有一张桌子，我正在拉入一份客户名单。也许其中一个参数是包含城市、州、邮编等参数的地址对象。我可以很容易地使这些值中的任何一个出现在表中（例如 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的涡轮表实现这样的目标？

4

2 回答 2

2

在即将到来的里程碑尝试解决相关的自定义过滤器功能请求之前，我认为类似于 Material 2 方法的自定义过滤器是不可能的。

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

您可能不会显示实际的过滤器友好 col def 值。相反，您将从打开过滤器友好列定义字段名称的 ng 模板中的相关原始表数据对象值呈现您喜欢的内容。

我使用这种方法来过滤需要在一行的单个表格单元格中显示的多个值，例如单个产品的货币价格。我在表格中显示堆叠的 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>

另一个例子是，我可以用两个 CSV 字符串中的一个替换一个col.field类似的名称enabledProduct，这些字符串表示人们可以输入到 PrimeNG 表过滤器输入中的典型布尔值范围，该输入设置为或者filterMatchMode contains但所有在视觉上显示的是已启用项目的巨大复选标记图标。0,n,no,off,false,disabled1,y,yes,on,true,enabled

（我通常使用文档中列出的 PrimeNG 'Dynamic Columns' 方法。）

于 2018-04-25T18:11:25.087 回答
-1

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

<p-table [globalFilterFields]="['notes','price','carType.name','nameOfCustomer']" >
于 2018-10-10T12:38:47.353 回答