Question

我使用的是PrimeNG数据表angular 2。当按下回车键时，如何仅触发primeNG数据表的过滤器？

基本代码：

HTML：

div class="container-fluid single-col-full-width-container">
  <div class="ui-widget-header ui-helper-clearfix" style="padding:4px 10px;border-bottom: 0 none">
    <i class="fa fa-search" style="float:right;margin:4px 4px 0 0"></i>
    <input #gb type="text" pInputText size="50" style="float:right" placeholder="Filter...">
  </div>
  <div class="ContentSideSections Implementation">
    <p-dataTable
      #reprintGrid
      [value]="datasource"
      [(selection)]="jobs"
      (onRowSelect)="onRowSelect($event)"
      [paginator]="true"
      [rows]="10"
      [responsive]="true"
      [totalRecords]="totalRecords"
      [lazy]="true"
      (onLazyLoad)="getNewDatasource($event)"
      [pageLinks]="10"
      [rowsPerPageOptions]="[10, 25, 50, 100]"
      [globalFilter]="gb"
    >
      <p-column [style]="{'width':'38px'}" selectionMode="multiple"></p-column>
      <p-column *ngFor="let col of columnDefs" [field]="col.field" [header]="col.headerName" [sortable]="true">
      </p-column>
    </p-dataTable>
  </div>
</div>

TS文件：

export class ReprintModuleComponent implements OnDestroy, OnInit {

  columnDefs = [
    {
      headerName: 'Athlete',
      field: 'athlete'
    },
    {headerName: 'Age', field: 'age'},
    {headerName: 'Country', field: 'country'},
    {headerName: 'Year', field: 'year'},
    {headerName: 'Date', field: 'date'},
    {headerName: 'Sport', field: 'sport'},
    {headerName: 'Gold', field: 'gold'},
    {headerName: 'Silver', field: 'silver'},
    {headerName: 'Bronze', field: 'bronze'},
    {headerName: 'Total', field: 'total'}
  ];

  datasource=[];
  jobs = [];
  totalRecords: number;
  pngService: PrimeNgCommonService;
  @ViewChild('reprintGrid') reprintGrid;
  @ViewChild('gb') globalFilter;

  getNewDatasource(event: LazyLoadEvent) {
    //in a real application, make a remote request to load data using state metadata from event
    //event.first = First row offset
    //event.rows = Number of rows per page
    //event.sortField = Field name to sort with
    //event.sortOrder = Sort order as number, 1 for asc and -1 for dec
    //filters: FilterMetadata object having field as key and filter value, filter matchMode as value

    let obsResponse = this.pjService.sampleData();
    obsResponse.subscribe(
      res => {
        this.datasource = res;
        this.totalRecords = res.length;
      }
    );       
  }

  constructor(private pjService: PrintJobService) {
    this.pngService = PrimeNgCommonService.getInstance();
  }

  onRowSelect(event) {

  }
}

如何覆盖数据表的过滤以仅触发按键输入？

Answer 1

官方认为这不可行......但我可以通过操纵filterDelay属性并使用Angular 2的key event功能来实现这一点，我会写一般版本如何做到这一点。

TS文件

import {DataTable} from "primeng/components/datatable/datatable";

@Component({
    templateUrl: '.../some.component.html'
})

export class SomeComponent implements OnInit {
    @ViewChild(('myDT')) dataTableX: DataTable;

    constructor() {}

    ngOnInit() {
        // I used this number by (1)
        this.dataTableX.filterDelay = 2147483647;
    }

    filter(){
        this.dataTableX.filterDelay = -1;
    }

    reset(){
        this.dataTableX.filterDelay = 2147483647;
    }
}

HTML文件

<p-dataTable #myDT (keydown.enter)="filter()" (keyup.enter)="reset()" >
    <p-column field="fieldx" header="Column name" [filter]="true"></p-column>
</p-dataTable>

我测试使用：

Primeng 1.0.0-beta.17
Angular 2.0.0最终版本

（1）自动过滤器的延迟次数约为24天。无法使用Infinity，Number.MAX_VALUE或Number.MAX_SAFE_INTEGER，因为浏览器使用32 bits int。

我希望这有用。

如何仅触发键输入primeNG数据表的过滤器angular 2

1 个答案: