实现NGX Datatable列过滤
我一直试图让这个工作没有运气。 我一直在引用这些资源来寻求帮助：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);
}
在这里我显然只是处理我的items数组的'name'属性的过滤。 这工作原理很好，但就像我刚才提到的，如果网格包含很多列，我希望有一种方法可以处理所有这些问题。 任何帮助或提示，表示赞赏。
使用示例TS文件进行过滤（https://github.com/swimlane/ngx-datatable/blob/master/demo/basic/filter.component.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;
}
这里是你的代码与多列过滤的例子：
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;
});
}
如果我没有犯任何错误，它应该正常工作。
链接地址: http://www.djcxy.com/p/96855.html