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

Question

PrimeNg 数据表使用内置 [filter]="true"。这将在内部创建一个用于过滤数据的输入文本框。我怎样才能将这个 textbox 放在 datatable 之外并为特定列完成筛选？

Answer 1

与展示柜中的示例完全一样。

DataTable Filtering - Global Filter

Answer 2

在搜索了整个primeng 文档后，我发现primeng 目前不支持此功能。我们将不得不自己归档数据并更新 prime ng 数据表 [value] 模型。

Answer 3

下面是用于过滤 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>

component.ts:

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

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

Answer 4

请看https://www.primefaces.org/primeng/#/table/filter

如果将 dt.filterGlobal($event.target.value, 'contains') 替换为 dt.filter($event.target.value, 'your field name','contains')，数据表将使用该字段进行过滤。

如果您有外部搜索字段，请从事件处理程序中调用相同的函数。

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

PrimeNG datatable filter by column - External textbox input

angular

primeng