如何在Primeng数据表中预设(以编程方式)过滤器值 [英] How to preset (programmatically) the filter value in primeng datatable

问题描述

使用angular(4.1.3)和primeng(4.0.3)数据表，我需要设置过滤器值(例如，通过URL参数).

Using angular (4.1.3) and primeng (4.0.3) datatable I need to set the filter value (e.g. from URL parameter).

primeng在自定义过滤器上有一个很好的文档( https://www .primefaces.org/primeng/#/datatable/filter ). 我尝试使用primeng InputText组件作为自定义过滤器类似地实现它:

There is a pretty good docu on custom filters by primeng (https://www.primefaces.org/primeng/#/datatable/filter). I've tried to implement it similarly with a primeng InputText component as a custom filter:

<p-dataTable 
      [value]="licenses" scrollable="true"
      exportFilename="licenses" 
      sscrollHeight="60vh" [paginator]="true" [rows]="20"  [pageLinks]="10" [rowsPerPageOptions]="[5,10,20,50,100,999999]" #dt>

        <p-column [style]="{'width':'180px'}" [sortable]="true" field="customerId" header="Customer ID" [filter]="true" filterMatchMode="contains" filterPlaceholder="Search">

          <ng-template pTemplate="filter" let-col>
            <input type="text" pInputText [(ngModel)]="custFilter" style="width:100%" (onChange)="dt.filter($event.value,col.field,col.filterMatchMode)" class="ui-column-filter"/>
          </ng-template>

        </p-column>

        ...

</p-dataTable>

现在，我有一个输入字段，它看起来像常规"字段，甚至还有我组件中的"custFilter"模型作为预选的过滤器值.

Now I have an input field, which looks like the "regular" one and even has a "custFilter" model from my component as pre-selected filter value.

唯一的问题是，此自定义过滤器不起作用.不管我输入哪个值，它都不会过滤(与常规" primng数据表过滤器相反). 这是屏幕截图

The only issue is, this custom filter does not work. It just does not filter regardless of which value I enter (in opposite to the "regular" primeng datatable filter). Here is a screenshot

推荐答案

在进一步调试类型脚本代码时，我发现了一种进行过滤的方法.输入应如下所示:

While further debugging the type script code I have found a way to do the filtering. The input should be like following:

<input #filtr type="text" pInputText [(ngModel)]="custFilter" style="width:100%" (input)="dt.filter($event.srcElement.value,col.field,col.filterMatchMode);" class="ui-column-filter"/>

主要区别是，(输入)而不是(onChange)和"$ event.srcElement.value"而不只是"$ event.value"

The main difference is, the (input) instead of (onChange) and "$event.srcElement.value" instead of just "$event.value"

此外，要在初始加载页面和数据之后实现初始过滤，必须从相应的组件内分派输入事件:

Furthermore to achieve initial filtering after the page and data is initially loaded an input event has to be dispatched from within an according component:

...
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
...
export class DataComponent implements OnInit {
  @ViewChild(('dt')) dt: DataTable;
  @ViewChild(('filtr')) filtr: ElementRef;
    private initData(): void {
        this.dataService
          .getData()
          .then(data => {
            this.data = data;

            //After the data is loaded, the filtering has to be triggered.
            //A timeout is needed to avoid weird browser console logs if data isn't fully loaded into datatable yet before filtering
            setTimeout(() => {
              //console.log(this.filtr);
              var event = new Event('input', {
                  'bubbles': true,
                  'cancelable': true
              });
              this.filtr.nativeElement.dispatchEvent(event);

              //One could also call "filter" directly instead of dispatching an input event
              //Working example: this.dt.filter(this.custFilter,"customerId", "contains"); 
              //But emmiting an event seems to be better, because no filterMatchMode has to be 
              //hardcoded and is taken from template
            }, 50); 
          }).catch(this.handleError);
      }

      ngOnInit(): void {
        this.initLicenses();
      }

这篇关于如何在Primeng数据表中预设(以编程方式)过滤器值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！