时间戳

首页 > 解决方案 > 是否可以自定义浮动过滤器来处理正则表达式

javascript - 是否可以自定义浮动过滤器来处理正则表达式

问题描述

我希望能够将浮动过滤器的自由文本输入用作正则表达式解析器。这意味着，例如，如果在我的浮动过滤器中我有一个值“Greg*”，则过滤后的数据应该包含所有以“Greg”开头的值。

预期用法示例

我希望能够实现我自己的正则表达式规则。我知道我可以在右侧的过滤器按钮中执行此操作，但我想在可见的自由文本输入上执行此操作，而无需用户单击按钮。

标签： javascriptfilterwildcardag-gridag-grid-react

解决方案

在更仔细地查看了 ag-grid 文档后，我解决了我的问题，这是我应该从一开始就做的事情

由于浮动过滤器实际上显示了它们的父过滤器状态，因此应该一起实现他自己的自定义过滤器和浮动过滤器。所以我实现了两个类CustomTextFilter和CustomTextFloatingFilter，分别实现了来自 ag-grid 库的IFilterComp和IFloatingFilterComp 。

export class CustomTextFilter implements IFilterComp{
    // IFilterComp method implementations here [...]
}

export class CustomTextFloatingFilter implements IFilterComp{
    // IFilterComp method implementations here [...]
}

在CustomTextFilter类中，最重要的是实现dosFilterPass方法，我们可以在其中实现我们的正则表达式逻辑。下面是一个示例，其中的规则允许我们搜索以逗号分隔的多个字符串：

doesFilterPass(params: IDoesFilterPassParams): boolean {
    var passed = false;
    var valueGetter = this.valueGetter;
    var filterText = this.eFilterText.value

    if (this.isFilterActive()) {
        var value = valueGetter(params);
        passed = filterText.toLowerCase().split(",").some((word: any) => {
            return word !== null && word !== undefined && word.trim() !== '' 
                && value.toString().toLowerCase().trim().indexOf(word) >= 0;
        });
    }  
    return passed;
}

然后在CustomFloatingFilter中，我们确保我们监听输入事件，以便我们可以将值从浮动过滤器传输到父过滤器，然后刷新网格：

init(params: IFloatingFilterParams): void {
    // Some gui code here [...]

    this.eFilterInput = this.gui.querySelector('input');
    this.eFilterText = this.gui.querySelector('#floatingFilterText');

    var that = this;
    this.eFilterText.addEventListener("input", (event: any) => {
        that.filterText = event.target.value;
        params.parentFilterInstance((instance: any) => {
            instance.setModel({ value: that.filterText });
            instance.gridApi.onFilterChanged();
        });
    });
}

希望这会有所帮助！

推荐阅读