Question

设计人员的

UI模拟要求我将全局搜索过滤器移到p表之外，但是我不确定如何执行此操作，或者不确定是否可行？有人有做类似事情的经验吗？我可以严格使用CSS样式来做到这一点，同时针对不同的屏幕尺寸保持自适应布局吗？

<p-table #dt [value]="tags" [paginator]="true" [rows]="25" [columns]="cols" [resizableColumns]="true" [globalFilterFields]="['vendor']">
  <ng-template pTemplate="caption">
    <div style="text-align: right; overflow-x: hidden;">
      <p class="wrapper"><input type="text" class="search-vendors" pInputText size="50" placeholder="Search Vendors" (input)="dt.filterGlobal($event.target.value, 'contains')" style="width:auto"></p>
    </div>
  </ng-template>
  <ng-template pTemplate="header" let-columns>
    <tr>
      <th class="{{col.class}}" *ngFor="let col of columns" [pSortableColumn]="col.field">
        <p-sortIcon [field]="col.field" *ngIf="col.field == 'fieldThree' || col.field == 'fieldOne' || col.field == 'fieldTwo' "></p-sortIcon>
        {{col.header}}
        <fa *ngIf="col.field == 'fieldThree' || col.field == 'fieldTwo'" name="info-circle" pTooltip="{{col.tooltip}}" tooltipPosition="right" showDelay="1000" hideDelay="500"></fa>
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-rowData let-columns="cols">
    <tr [pSelectableRow]="rowData">
      <td *ngFor="let col of cols" [ngClass]="{'toggle-tag': col.field==''}">
        <div *ngIf="col.field == 'fieldThree'; then vendorRow"></div>
        <div *ngIf="col.field == 'fieldTwo' || col.field == 'domain' || col.field == 'fieldThree'; then default"></div>
        <ng-template #vendorRow><a (click)="showVendorDetails(rowData)">{{rowData[col.field]}}</a></ng-template>
        <ng-template #default>{{rowData[col.field]}}</ng-template>
      </td>
    </tr>
  </ng-template>
</p-table>

Answer 1

是的，有可能。只需删除ng-template pTemplate="caption"内的p-table块，并在p-table

外具有完全相同的输入字段（如下所示）

<input type="text" class="search-vendors" pInputText size="50" placeholder="Search Vendors" 
 (input)="dt.filterGlobal($event.target.value, 'contains')" style="width:auto">

这完全可以在p-table中使用。然后，您可以使用任何CSS（以使其具有响应性和所有功能）。保留其余的p-table代码。

关注Official docs

Angular 6如何将PrimeNG全局过滤器移到<p-table>之外？

1 个答案: