angular - primeNG 数据表 - 像过滤器一样的 excel

Question

原件（5 月 20 日）

我正在使用 PrimeNG beta6 和 Angular2 RC。

我的 p-dataTable 示例，我使用 [filter]="true" 启用了列过滤器，但这只是提供了普通的文本过滤器选项。

<p-dataTable [value]="products" [rows]="2" [paginator]="true" [pageLinks]="3" >
    <header>List of products</header>
    <p-column field="productName" header="productName" [sortable]="true"></p-column>
    <p-column field="productCode" header="productCode" [filter]="true"></p-column>
    <p-column field="releaseDate" header="releaseDate" [filter]="true"></p-column>
    <p-column field="description" header="description"></p-column>
</p-dataTable>

我如何在此应用类似 excel 的过滤器？

---

编辑（7 月 10 日）：

我已使用 Angular 2 RC4 版本将我的应用程序更新到 PrimeNG beta 9

p-dataTable 过滤器如下所示 -

但是，excel 过滤器如下所示-

任何人都有想法如何在primeNG数据表上应用类似过滤器的excel？

Answer 1

可能带有多选过滤器！

<p-dataTable [value]="products" [rows]="2" [paginator]="true" [pageLinks]="3" >
    <header>List of products</header>
    <p-column field="productName" header="productName" [sortable]="true"></p-column>
    <p-column field="productCode" header="productCode" [filter]="true">
 <ng-template pTemplate="filter">
            <p-multiSelect [options]="SelectedItemObject"
                           appendTo="body"
                           defaultLabel="SelectProduct"
                           styleClass="ui-column-filter"
            ></p-multiSelect>
        </ng-template>
</p-column>
    <p-column field="releaseDate" header="releaseDate" [filter]="true"></p-column>
    <p-column field="description" header="description"></p-column>
</p-dataTable>

请参阅 primeNg 以获取多选信息！ https://www.primefaces.org/primeng/#/multiselect