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

Question

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

Answer 1

搜索整个primeng文件后，我发现，目前primeng不支持此功能。我们将不得不自己填写数据并更新主要数据表[value]模型。

Answer 2

完全像展示柜上的例子。

DataTable Filtering - Global Filter

Answer 3

下面是外部下拉菜单来过滤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.