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

Question

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

Ag-grid's filter docs state that "in range" filtering is only supported for date and number data types. Looking at ag-grid's multi-filter example，多个过滤器在过滤器模型中用一个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”数组中包含每个字母的条件。有没有更有效的方法来做到这一点？

Answer 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;
};

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

Ag-grid set column text filter to range of letters

ag-grid