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

Question

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

开头的值

Expected Usage Example

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

Answer 1

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

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

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

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

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

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

希望对您有所帮助！

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

Is it possible to customise a Floating Filter to handle Regular Expressions

javascript

wildcard

filter

ag-grid

ag-grid-react