web-dev-qa-db-fra.com

Filtrage de différentes colonnes dans une table de matériaux

J'essaie d'ajouter différents filtres à une table de matériaux. Pour être plus précis, j'essaie de reproduire quelque chose de similaire au GIF suivant

image description

Pour ce faire, je suis la réponse de irowbin dans ce qui suit fil Github mais je ne peux pas vraiment produire ce que je veux en fonction de ses directives

Existe-t-il un exemple de travail sur Stackblitz ou Github pour que je puisse suivre et créer plusieurs filtres de recherche dans Mattable?

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

ceci un exemple de filtre de colonne d'implémentation pour angular basée sur d'autres composants matériels ????

structure du filtre de colonne pour une seule colonne

<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 utilisation de la directive pour éviter de masquer le menu du tapis lors d'un événement click

liste des conditions et fonctions

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

composant

 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 ???? / aperçu ????

14
malbarmawi