实施NGX Datatable列过滤

Question

我一直在努力让这个工作没有运气。我一直在引用这些资源的帮助： http://swimlane.github.io/ngx-datatable/#filter
https://github.com/swimlane/ngx-datatable/blob/master/demo/basic/filter.component.ts

基本上我只想让我的过滤器适用于多单柱多，不执行代码来处理每一列。 （有些数据表有​​20分多列！）

示例代码：

//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); 
    } 

在这里，我明明只是处理过滤我的项目数组的“名称”属性。这工作原理很好，但就像我刚才提到的，如果网格包含很多列，我希望有一种方法可以处理所有这些问题。任何帮助或提示，表示赞赏。

Answer 1

这里是你的代码的多列过滤的例子：

updateFilter(filter: string): void { 

    const val = filter.trim().toLowerCase(); 

    this.filteredList = this.items.slice().filter((item: any) => { 
    let searchStr = ''; 
    for (let i = 0; i < this.gridProperties.FilteredColumns.length; i++) { 
     searchStr += (item[this.gridProperties.FilteredColumns[i]]).toString().toLowerCase(); 
    } 
    return searchStr.indexOf(val) !== -1 || !val; 
    }); 
} 

如果我没有任何错误，它应该正常工作。

Answer 2

使用用于过滤 （https://github.com/swimlane/ngx-datatable/blob/master/demo/basic/filter.component.ts） 为基础的例子TS文件，我是能够成功地使动态过滤所有的列（它会过滤所有列，而无需指定即可）。我已经包含了我认为所有这些工作的必要组成部分，但也尽可能地减少了代码，使其更易于理解。

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)'> 

打字稿

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]].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; 
}