web-dev-qa-db-ja.com

材料テーブルの異なる列のフィルタリング

材料テーブルに異なるフィルターを追加しようとしています。より正確には、次のGIFのようなものを再現しようとしています。

image description

そうするために、私は次のようにirowbinの応答をフォローしています Github thread

StackblitzまたはGithubに実用的な例はありますか？私はmattable内で複数の検索フィルターを追跡して作成できますか？

angularangular-materialmaterial-designangular-material-5angular-material-6
9
MHOOS

これは、angular他の材料コンポーネントに基づく材料テーブル????

単一列の列フィルターの構造

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

source ???? / preview ????

14
malbarmawi