primeNG数据表 - 优于过滤器

时间:2016-05-20 03:40:49

标签: angular primeng

ORIGINAL(可能20)

我正在使用带有Angular2 RC的PrimeNG beta6。

我是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 like filter?

编辑(7月10日):

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

p-dataTable过滤器如下所示 - enter image description here

然而,excel过滤器如下所示 - enter image description here

任何人都知道如何在primeNG数据表上应用excel like filter?

1 个答案:

答案 0 :(得分:0)

可能使用MultiSelect滤镜!

<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获取multiSelect信息! https://www.primefaces.org/primeng/#/multiselect