过滤材料表中的不同列 [英] Filtering different columns in a material table
本文介绍了过滤材料表中的不同列的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试向材料表添加不同的过滤器。更准确地说,我正在尝试复制类似以下GIF的内容
为此,我遵循了irowbin在以下Github thread中的回应,但我无法真正根据他的指导方针生产出我想要的产品
在Stackblitz或Github上是否有任何可用的示例,以便我可以在Mattable内跟踪并创建多个搜索筛选器?
推荐答案
这是基于其他材料组件👇实现角度材料表的列过滤示例
单列过滤结构
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef>
<div class="header">
No.
<button mat-button class="btn-toggle" [matMenuTriggerFor]="menu">
<mat-icon>keyboard_arrow_down</mat-icon>
</button>
</div>
<mat-menu #menu>
<div mat-menu-item mat-filter-item [disableRipple]="true" class="menu-title">
No.
</div>
<div mat-menu-item mat-filter-item [disableRipple]="true">
<mat-form-field>
<mat-select [panelClass]="'mat-elevation-z10'" placeholder='Conditions' [(value)]="searchCondition.position">
<mat-option *ngFor="let condition of conditionsList" [value]="condition.value">{{condition.label}}</mat-option>
</mat-select>
</mat-form-field>
</div>
<div mat-menu-item mat-filter-item [disableRipple]="true">
<mat-form-field>
<input matInput placeholder="Value" [(ngModel)]="searchValue.position">
</mat-form-field>
</div>
<div mat-menu-item mat-filter-item [disableRipple]="true">
<button mat-raised-button (click)="clearColumn('position')">Clear</button>
<button mat-raised-button color="primary" (click)="applyFilter()">Search</button>
</div>
</mat-menu>
</th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>
mat-filter-item
用于防止在单击事件时隐藏垫菜单的指令
条件列表和函数
export const CONDITIONS_LIST = [
{ value: "nono", label: "Nono" },
{ value: "is-empty", label: "Is empty" },
{ value: "is-not-empty", label: "Is not empty" },
{ value: "is-equal", label: "Is equal" },
{ value: "is-not-equal", label: "Is not equal" }
];
export const CONDITIONS_FUNCTIONS = { // search method base on conditions list value
"is-empty": function (value, filterdValue) {
return value === "";
},
"is-not-empty": function (value, filterdValue) {
return value !== "";
},
"is-equal": function (value, filterdValue) {
return value == filterdValue;
},
"is-not-equal": function (value, filterdValue) {
return value != filterdValue;
}
};
组件
public displayedColumns: string[] = ["position", "name", "weight", "symbol"];
public dataSource = new MatTableDataSource(ELEMENT_DATA);
public conditionsList = CONDITIONS_LIST;
public searchValue: any = {};
public searchCondition: any = {};
private _filterMethods = CONDITIONS_FUNCTIONS;
constructor() { }
ngOnInit() {
this.dataSource.filterPredicate = (p: PeriodicElement, filtre: any) => {
let result = true;
let keys = Object.keys(p); // keys of the object data
for (const key of keys) {
let searchCondition = filtre.conditions[key]; // get search filter method
if (searchCondition && searchCondition !== 'none') {
if (filtre.methods[searchCondition](p[key], filtre.values[key]) === false) { // invoke search filter
result = false // if one of the filters method not succeed the row will be remove from the filter result
break;
}
}
}
return result
};
}
applyFilter() {
let searchFilter: any = {
values: this.searchValue,
conditions: this.searchCondition,
methods: this._filterMethods
}
this.dataSource.filter = searchFilter;
}
clearColumn(columnKey: string): void {
this.searchValue[columnKey] = null;
this.searchCondition[columnKey] = 'none';
this.applyFilter();
}
这篇关于过滤材料表中的不同列的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文