如何在使用“inRange”过滤器类型的 ag-grid 中创建自定义浮动过滤器组件

Posted 2023-03-28

【中文标题】如何在使用“inRange”过滤器类型的 ag-grid 中创建自定义浮动过滤器组件

【英文标题】：How to create custom floating filter component in ag-grid that uses "inRange" filter type

【发布时间】：2020-08-07 00:17:16

【问题描述】：

我正在尝试构建一个自定义过滤器组件，该组件从文本输入控件（例如“3-5”）中获取一个范围来过滤数据。为此，我修改了ag-grid documentation 中给出的示例（参见下面的代码）。

将 onFloatingFilterChanged() 中的类型更改为 'equals'、'greaterThan'、'lessThan' 等时，一切正常。但是对于“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;
    
  

【问题讨论】：

您解决了这个问题吗？面临类似问题？

不，我没有。我最终得到了一个 100% 的自定义过滤器。

你能放一个plunkr吗？试图得到类似的东西

【参考方案1】：

自定义浮动日期选择器也面临同样的问题。我使用 setModelIntoUi 方法而不是 onFloatingFilterChanged：

instance.setModelIntoUi(
   type: 'inRange',
   dateFrom: moment(value.min).format('YYYY-MM-DD'), // you have to use exactly this date format in order for it to work
   dateTo: moment(value.max).format('YYYY-MM-DD'),
);

在你的情况下，它会是：

instance.setModelIntoUi(
   type: 'inRange',
   filter: value.min,
   filterTo: value.max,
);

UPD：添加了这一行

instance.onUiChanged(true);

在 setModelIntoUi 方法之后，由于错误：过滤器模型在第二次使用时没有更新。

【参考方案2】：

instance.onFloatingFilterChanged() 中的代码仅设置第一个 from 值。 使用下面的这些行来获得正确的结果，因为这是让 inRange 工作的唯一方法。

instance.setTypeFromFloatingFilter('inRange');
instance.eValueFrom1.setValue(this._input1.value);
instance.eValueTo1.setValue(this._input2.value);
instance.onUiChanged(true);