在所有列上实施NGX Datatable过滤 [英] Implementing NGX Datatable filtering on all columns

问题描述

我一直在努力使此工作顺利.我一直在参考这些资源以寻求帮助: http://swimlane.github.io/ngx-datatable/#filter
https://github.com/swimlane/ngx -datatable/blob/master/demo/basic/filter.component.ts

I've been trying to get this working with no luck. I've been referencing these resources for help: http://swimlane.github.io/ngx-datatable/#filter
https://github.com/swimlane/ngx-datatable/blob/master/demo/basic/filter.component.ts

基本上，我只想允许我的过滤器应用于多个列，而无需实现处理每个列的代码. (某些数据表有​​20多个列！)

Basically i just want to allow my filter to apply to more than a single column, without implementing code to handle every column. (Some datatables have 20+ columns!)

示例代码:

//HTML
  <input type='text' placeholder='Filter' (keyup)='updateFilter($event.target.value)' />

  <ngx-datatable
    class="material"
    columnMode="force"
    [columns]="gridProperties.FilteredColumns"
    [footerHeight]="50"
    [loadingIndicator]="gridLoadingIndicator"
    [rows]="filteredList"
    [scrollbarH]="false"
    [scrollbarV]="true"
    [selected]="selectedItem"
    [selectionType]="'single'"
    style="min-height:400px;">
  </ngx-datatable>

//TYPESCRIPT
  public items: Item[];

  updateFilter(filterValue) {
    const lowerValue = filterValue.toLowerCase();

    this.filteredList = this.items.filter(item => item.name.toLowerCase().indexOf(lowerValue) !== -1 || !lowerValue);
  }

在这里，我显然只是在处理对我的项数组的'name'属性的过滤.这可以很好地工作，但是就像我已经提到的那样，如果网格包含许多列，我希望使用一种方法来处理所有这些列.任何帮助或提示都将受到赞赏.

Here I am obviously just handling filtering for the 'name' property of my items array. This works great as is, but like I had mentioned, if the grid contains many columns I'd like one method to handle all of them. Any help or tips are appreciated.

推荐答案

使用示例TS文件进行过滤 ( https://github.com/swimlane/ngx-datatable/blob/master/demo/basic/filter.component.ts ) 作为基础，我能够成功地使它动态过滤所有列(无需指定它们就能过滤所有列).我已经包括了所有这些必不可少的部分，但为了使它更易于理解，我也尽可能地减少了代码.

Using the example TS file for filtering (https://github.com/swimlane/ngx-datatable/blob/master/demo/basic/filter.component.ts) as a foundation, I was able to successfully make it filter all columns dynamically (it will filter all columns without the need to specify them). I've included what I believe to be all the necessary parts for this to work but also trimmed the code down as much as I could to make it easier to understand.

HTML

<ngx-datatable
 #table
 class="material striped scroll-vertical"
 [rows]="data"
 [columns]="cols"
 [columnMode]="'force'"
 [headerHeight]="35"
 [footerHeight]="35"
 [rowHeight]="'auto'"
 [limit]="pageSize"
 [selectionType]="'single'">

<input type="text" (keyup)='filterDatatable($event)'>

TYPESCRIPT

TYPESCRIPT

cols = [{name:'First Name'},{name:'Last Name'},{name:'Address'}];
data = [];
filteredData = [];

// dummy data for datatable rows
dummyData = [
  {firstName:'Daenarys',lastName:'Targaryen',address:'Dragonstone'},
  {firstName:'Sansa',lastName:'Stark',address:'Winterfell'},
  {firstName:'Cersei',lastName:'Lannister',address:'Kings Landing'},
  {firstName:'Brienne',lastName:'Tarth',address:'Sapphire Island'},
  {firstName:'Lyanna',lastName:'Mormont',address:'Bear Island'},
  {firstName:'Margaery',lastName:'Tyrell',address:'Highgarden'}
]

ngOnInit(){
  // populate datatable rows
  this.data = this.dummyData;
  // copy over dataset to empty object
  this.filteredData = this.dummyData;
}

// filters results
filterDatatable(event){
  // get the value of the key pressed and make it lowercase
  let val = event.target.value.toLowerCase();
  // get the amount of columns in the table
  let colsAmt = this.cols.length;
  // get the key names of each column in the dataset
  let keys = Object.keys(this.dummyData[0]);
  // assign filtered matches to the active datatable
  this.data = this.filteredData.filter(function(item){
    // iterate through each row's column data
    for (let i=0; i<colsAmt; i++){
      // check for a match
      if (item[keys[i]].toString().toLowerCase().indexOf(val) !== -1 || !val){
        // found match, return true to add to result set
        return true;
      }
    }
  });
  // whenever the filter changes, always go back to the first page
  this.table.offset = 0;
}

这篇关于在所有列上实施NGX Datatable过滤的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！