gpt4 book ai didi

angular - 在所有列上实现 NGX 数据表过滤

转载 作者:太空狗 更新时间:2023-10-29 17:18:35 27 4
gpt4 key购买 nike

我一直在努力使它正常工作,但运气不佳。我一直在引用这些资源以寻求帮助: 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);
}

在这里,我显然只是处理对项目数组的“名称”属性的过滤。这很好用,但就像我提到的那样,如果网格包含许多列,我想要一种方法来处理所有列。感谢您提供任何帮助或提示。

最佳答案

使用示例 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)'>

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

关于angular - 在所有列上实现 NGX 数据表过滤,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45106241/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com