Как создать пользовательский компонент плавающего фильтра в ag-grid, который использует тип фильтра "inRange" - PullRequest
Новая
       110

Как создать пользовательский компонент плавающего фильтра в ag-grid, который использует тип фильтра "inRange"

0 голосов
/ 23 апреля 2020

Я пытаюсь создать пользовательский компонент фильтра, который принимает диапазон от элемента управления вводом текста (например, «3-5») для фильтрации данных. Для этого я изменил пример, приведенный в документации ag-grid (см. Код ниже).

При изменении типа в onFloatingFilterChanged () на 'equals', 'HigherThan', 'lessThan' et c. все отлично работает Но с типом «inRange» фильтрация не выполняется.

Рабочий пример можно найти на Plunkr: https://plnkr.co/edit/oHWFIaHgWIDXP0P5

import { Component } from '@angular/core';

import {
  IFloatingFilter,
  IFloatingFilterParams,
  NumberFilter,
  NumberFilterModel,
} from '@ag-grid-community/all-modules';
import { AgFrameworkComponent } from '@ag-grid-community/angular';

export interface RangeFloatingFilterParams extends IFloatingFilterParams {
  value: number;
}

@Component({
  template: `
    <input
      type="text"
      [(ngModel)]="currentValue"
      (ngModelChange)="valueChanged()"
      style="width: 70px;"
    />
  `,
})
export class RangeFloatingFilter
  implements IFloatingFilter, AgFrameworkComponent<RangeFloatingFilterParams> {
  private params: RangeFloatingFilterParams;

  public currentValue: string;

  agInit(params: RangeFloatingFilterParams): void {
    this.params = params;
    this.currentValue = '';
  }

  valueChanged() {
    let valueToUse = this.currentValue === 0 ? null : this.currentValue;
    this.params.parentFilterInstance(function(instance) {
      (<NumberFilter>instance).onFloatingFilterChanged(
        'inRange',
        valueToUse
      );
    });
  }

  onParentModelChanged(parentModel: NumberFilterModel): void {
    if (!parentModel) {
      this.currentValue = 0;
    } else {
      // note that the filter could be anything here, but our purposes we're assuming a greater than filter only,
      // so just read off the value and use that
      this.currentValue = parentModel.filter;
    }
  }
}
...