Question

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

Answer 1

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

html  page
   ----------------------------------------
    <!-- 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');
     }

     ------------------------------------------------------

 In this example if you change value of org drop down inside the datatable , then the external dropdown will change and my charts will be updated.
 if you change the external drop down value then primeng datatable filter will be updated and displays the filtered output + charts will be updated.

Answer 2

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

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

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

Answer 3

在搜索完整的primeng文档后，我发现primeng目前不支持此功能。我们必须自己提交数据并更新主数据[value]模型。

Answer 4

与展示中的示例完全相同。

DataTable Filtering - Global Filter

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

4 个答案: