Можно ли настроить плавающий фильтр для обработки регулярных выражений

Question

Я хотел бы иметь возможность использовать свободный текстовый ввод плавающего фильтра в качестве анализатора регулярных выражений. Это означает, что, например, если в моем плавающем фильтре у меня есть значение "Greg *", отфильтрованные данные должны содержать все значения, начинающиеся с "Greg".

Пример ожидаемого использования

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

Answer 1

Я решил свой вопрос, посмотрев более внимательно на документацию ag-grid, то, что я должен был сделать с самого начала ?

Поскольку плавающие фильтры фактически показывают свое родительское состояние фильтра, следует реализовать его собственный настраиваемый фильтр и плавающий фильтр вместе. Поэтому я реализовал два класса 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 наиболее важным является реализация метода doesFilterPass , в котором мы можем реализовать наше регулярное выражение logi c. Ниже приведен пример с правилом, которое позволяет нам искать несколько строк, разделенных запятой:

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 мы проверяем, что мы прослушиваем событие ввода поэтому мы можем передать значение из плавающего фильтра в родительский фильтр, а затем переосмыслить sh сетку:

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

Надеюсь, это поможет!