Фильтр отдельных столбцов ngx-datatable - PullRequest
Новая
       10

Фильтр отдельных столбцов ngx-datatable

1 голос
/ 21 января 2020

Индивидуальная фильтрация не выходит за рамки Swimlanes ngx-datatable . Там не так много решений. Я работал над фильтрацией столбца с помощью флажков. Если флажок установлен, соответствующее свойство остается видимым, а все остальные свойства скрываются из вида.

Проблема, которая возникает при выборе нескольких флажков (более одного), результатов не появляется, мои фильтры находят только отдельных Я думаю, что сопоставление с двумя проверенными не удовлетворяет фильтру.

Например, если я выберу "женщина", женщина будет отфильтрована. Затем, если я выберу "мужчина", желаемый результат будет таким, что должны быть показаны и "женщина", и "мужчина".

DEMO - https://codesandbox.io/s/swimlane-filter-table-kjiyl

import { Component, ViewChild, TemplateRef } from "@angular/core";

@Component({
  selector: "filter-demo",
  template: `
    <div>
      <h3>
        Client-side Search and Filtering
      </h3>

      <ngx-datatable
        #table
        class="material"
        [columns]="columns"
        [columnMode]="'force'"
        [headerHeight]="100"
        [footerHeight]="50"
        [rowHeight]="'auto'"
        [limit]="10"
        [rows]="rows"
      >
      </ngx-datatable>

      <ng-template #hdrTpl let-column="column" let-sort="sortFn">
        <div (click)="sort()">{{ column.name }}</div>
        <div>
          <label class="small m-0 datatable-checkbox">
            <input
              type="checkbox"
              [(ngModel)]="isFilterFemale"
              (change)="doFilter()"
              [ngModelOptions]="{ standalone: true }"
            />
            Female
          </label>
        </div>
        <div>
          <label class="small m-0 datatable-checkbox">
            <input
              type="checkbox"
              [(ngModel)]="isFilterMale"
              (change)="doFilter()"
              [ngModelOptions]="{ standalone: true }"
            />
            Male
          </label>
        </div>
      </ng-template>
    </div>
  `
})
export class FilterBarComponent {
  // @ViewChild(DatatableComponent, { static: false }) table: DatatableComponent;
  @ViewChild("hdrTpl", { static: true }) hdrTpl: TemplateRef<any>;

  rows = [];

  temp = [];

  columns = [];
  isFilterFemale = false;
  isFilterMale = false;
  constructor() {
    this.fetch(data => {
      // cache our list
      this.temp = [...data];

      // push our inital complete list
      this.rows = data;
    });
  }
  ngOnInit() {
    this.columns = [
      { name: "name", prop: "name", headerTemplate: this.hdrTpl }
    ];
    this.doFilter();
  }
  fetch(cb) {
    const req = new XMLHttpRequest();
    req.open("GET", "assets/data.json");

    req.onload = () => {
      cb(JSON.parse(req.response));
    };

    req.send();
  }

  private doFilter() {
    this.rows = this.temp
      .filter(x => this.femaleFilter(x.classification.code))
      .filter(x => this.maleFilter(x.classification.code));
  }

  private femaleFilter(classificationCode) {
    if (!this.isFilterFemale) {
      return true;
    } else {
      if (classificationCode === "FMALE") {
        return true;
      } else {
        return false;
      }
    }
  }

  private maleFilter(classificationCode) {
    if (!this.isFilterMale) {
      return true;
    } else {
      if (classificationCode === "MALE") {
        return true;
      } else {
        return false;
      }
    }
  }
}
...