Ag-grid 将列文本过滤器设置为字母范围答案

【问题标题】：Ag-grid set column text filter to range of lettersAg-grid 将列文本过滤器设置为字母范围
【发布时间】：2021-10-04 15:25:11
【问题描述】：

目标是将列的文本过滤器设置为值以字母开头的范围。例如，在客户名称列中，将过滤器设置为“以”开头，范围为 a-m。用户将输入定义范围开始和结束的两个字母（例如“a”和“m”）。

Ag-grid's filter docs 声明“范围内”过滤仅支持日期和数字数据类型。看ag-grid's multi-filter example，多个filter在filter模型中用OR条件组合：

{
    athlete: {
        filterType: "multi",
        filterModels: [
            {
                filterType: "text",
                operator: "OR",
                condition1: {
                    filterType: "text",
                    type: "startsWith",
                    filter: "a"
                },
                condition2: {
                    filterType: "text",
                    type: "startsWith",
                    filter: "b"
                }
            },
            null
        ]
    }
}

看起来解决方案是以编程方式查找用户指定范围内的所有字母，然后在“filterModels”数组中包含每个字母的条件。有没有更有效的方法来做到这一点？

【问题讨论】：

进一步测试表明 ag-grid 仅使用“filterModels”数组中的前两个条件。我添加了三个在应用过滤器模型时被忽略的附加条件。外部过滤器很可能是这里的最佳解决方案。
您是绝对正确的，标准过滤器中的 ag-grid 使用 ICombinedSimpleModel 接口，该接口仅支持 2 个条件。在您的情况下，您需要编写自己的自定义过滤器组件

标签： ag-grid

【解决方案1】：

custom filter 是这种情况的最佳解决方案。

我希望支持可选的字母范围，以及过滤字段中的可选附加文本。在 doesFilterPass 方法中使用与此模式匹配的正则表达式按预期工作。

使用 Vue 和 lodash 的示例：

doesFilterPass(params) {
    // Regex matches "[A-M]", "[n-z]", "[E-p] additionaltext", etc
    const nameFilterRegex = /^(?<nameStartRange>\[[a-z]{1}-[a-z]{1}\])?(?:\s+)?(?<additionalText>[a-z]+)?(?:\s+)?$/i;
    const regexResult = nameFilterRegex.exec(params.data.name);
    
    if (!isNil(regexResult)) {
        const nameRange = regexResult.groups.nameStartRange;
        const additionalText = regexResult.groups.additionalText;
    
        if (!isEmpty(nameRange)) {
            try {
                const lastNameRegex = new RegExp(nameRange, "gi");
                const matchedChar = params.data.name[0].match(lastNameRegex);
                if (isEmpty(matchedChar)) {
                    return false;
                }
            } catch {
                return false;
            }
        }
    
        if (!isEmpty(additionalText)) {
            if (!params.data.filterValue.includes(additionalText)) {
                return false;
            }
        }
    }
    
    return true;
};

【讨论】：