PrimeNG 数据表按列过滤 - 外部文本框输入

Question

PrimeNg 数据表使用内置的[filter]="true". 这将在内部创建一个用于过滤数据的输入文本框。如何将它textbox放在外面datatable并为特定列完成过滤器？

Answer 1

下面是带有外部下拉列表的代码，用于过滤 Primeng 数据表。

html页面：

<!-- Top of the page -->
<div>
<p-dropdown [options]="orgs" [(ngModel)]="selectedOrg"  (onChange)="updateOrgFilter(dt);getFilteredOutput($event,dt)" styleClass="ui-column-filter"></p-dropdown>
</div>

<!-- Pie Chart -->

<!-- Bar Chart -->

<!-- Datatable -->

<p-dataTable #dt [value]="itemslist"  [rows]="30" [paginator]="true" [rowsPerPageOptions]="[30,50,75]" sortMode="multiple" scrollable="true"   resizableColumns="true" scrollHeight="350px">
    <p-header>
        <div class="ui-helper-clearfix">
            List of Items
        </div>
    </p-header>

    <p-column [style]="{'width':'100px'}"field="wipJobNum" header ="Title" [sortable]="true" [filter]="true" ></p-column>
    <p-column [style]="{'width':'150px'}"field="partNum" header ="Part Number" [sortable]="true" [filter]="true" ></p-column>
    <p-column [style]="{'width':'90px'}" field="org" header ="Org" [sortable]="true" [filter]="true"  filterMatchMode="equals">
        <ng-template pTemplate="filter" let-col>
            <p-dropdown [options]="orgs" [(ngModel)]="selectedOrg" appendTo="body" [style]="{'width':'100%'}"  (onChange)="dt.filter($event.value,col.field,col.filterMatchMode);getFilteredOutput(event,dt)"  styleClass="ui-column-filter"></p-dropdown>
        </ng-template>
    </p-column>
</p-dataTable>

组件.ts：

updateOrgFilter(dt) {
    dt.filter(this.selectedOrg, 'org', 'equals');
}

在此示例中，如果您更改 datatable 内 org 下拉列表的值，则外部下拉列表将更改并且我的图表将更新。如果您更改外部下拉值，那么primeng 数据表过滤器将被更新并显示过滤的输出+图表将被更新。