angular – primeNG数据表 – 优于过滤器

发布时间：2020-12-17 18:04:53 所属栏目：安全来源：网络整理

导读：原文(可能20) 我正在使用PrimeNG beta6和Angular2 RC. 我是p-dataTable的样本,我使用[filter] =“true”启用了列过滤器,但这只是给出了普通的文本过滤器选项. p-dataTable [value]="products" [rows]="2" [paginator]="true" [pageLinks]="3" headerList of

原文(可能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 like filter？

编辑(7月10日)：

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

p-dataTable过滤器如下所示 –

enter image description here

但是,excel过滤器看起来如下 –

enter image description here

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

解决方法

可能有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>

有关multiSelect信息,请参阅primeNg！
https://www.primefaces.org/primeng/#/multiselect

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!