angular - 如何允许使用 ngx-datatable 进行多次搜索
问题描述
我正在使用此https://github.com/swimlane/ngx-datatable/blob/master/demo/basic/filter.component.ts来帮助我在表中创建搜索。
我的目标是创建高级搜索:按性别和姓名值过滤
rows = [
{ name: 'Austin', gender: 'Male', company: 'Swimlane' },
{ name: 'Dany', gender: 'Male', company: 'KFC' },
{ name: 'Molly', gender: 'Female', company: 'Burger King' },
];
columns = [
{ prop: 'name' },
{ name: 'Gender' },
{ name: 'Company' }
];
@ViewChild(DatatableComponent) table: DatatableComponent;
temp=[]
constructor() {
this.temp = this.rows;
}
updateFilter(event) {
const val = event.target.value.toLowerCase();
const temp = this.temp.filter(function (d) {
return d.name.toLowerCase().indexOf(val) !== -1 || !val;
});
this.rows = temp;
}
updateFilter1(event) {
const val = event.target.value.toLowerCase();
const temp = this.temp.filter(function (d) {
return d.gender.toLowerCase().indexOf(val) !== -1 || !val;
});
this.rows = temp;
}
我只是复制我的搜索创建第二个按性别过滤的功能。但是,两个搜索都是分开工作的(消除另一个的限制),我不知道如何解决它。
在这里你可以找到我的html
:
<input
type='text'
style='padding:8px;margin:15px auto;width:30%;'
placeholder='Type to filter the name column...'
(keyup)='filterByName($event)'
/>
<input
type='text'
style='padding:8px;margin:15px auto;width:30%;'
placeholder='Type to filter the name column...'
(keyup)='filterByGender($event)'
/>
<ngx-datatable
#table
class='material'
[columns]="columns"
[columnMode]="'force'"
[headerHeight]="50"
[footerHeight]="50"
[rowHeight]="'auto'"
[limit]="10"
[rows]='rows'>
</ngx-datatable>
解决方案
... // other vars you already have
previousNameFilter = ''
previousGenderFilter = ''
filterByName(event) {
const filter = event.target.value
this.previousNameFilter = filter
this.temp = this.filterRows(filter, this.previousGenderFilter)
}
filterByGender(event) {
const filter = event.target.value
this.previousGenderFilter = filter
this.temp = this.filterRows(this.previousNameFilter, filter)
}
filterRows(nameFilter, genderFilter): any[] {
nameFilter = nameFilter.toLowerCase()
genderFilter = genderFilter.toLowerCase()
return this.rows.filter(row => {
const isPartialNameMatch = row.name.toLowerCase().indexOf(nameFilter) !== -1 || !nameFilter
const isPartialGenderMatch = row.gender.toLowerCase().indexOf(genderFilter) !== -1 || !genderFilter
return isPartialNameMatch && isPartialGenderMatch
});
}
推荐阅读
- windows - 转义 > 不在嵌入式命令中工作
- javascript - 带选择的动态表单输入
- database - DDL 触发器 - 无法禁用触发器
- excel - 多个 COUNTIFS 条件格式 Excel
- c - C字符串数组,分配和传递等
- java - 更新 Firebase 库后出现“找不到 com.google.android.gms.internal.zzbck 的类文件”错误
- python-3.x - 导入模块中的 Python 3.6 线程不会提高速度
- excel-formula - Excel 公式 - 扭曲数字的精确匹配
- jsonschema - 如何使用 JSONSchema 接受任何对象字符串值,而不管其键是什么?
- r - 在R中选择有时间的行