如何在Kendo Grid jQuery中实现包含两个字段的列过滤

我来帮你搞定这个Kendo Grid的过滤问题！你遇到的核心痛点是：你的Name列是用FirstName和LastName拼接的自定义模板，但Grid默认只会根据列配置的field属性（这里是FirstName）来做过滤，所以搜不到LastName的内容。下面有两种实用的解决方案，你可以根据自己的场景选择：

方法一：自定义过滤函数（直接在列配置中实现） #

这种方法不需要修改数据源，直接给列的过滤单元格替换默认的过滤逻辑，让它同时检查FirstName和LastName两个字段。修改你的列配置如下：

$("#grid").kendoGrid({ 
    autoBind: true, 
    dataSource: { 
        data: tempData, 
        pageSize: 5 
    }, 
    filterable: { mode: "row" }, 
    columns: [ 
        { 
            title: "Name", 
            field: "FirstName", // 这里只是占位，实际过滤逻辑我们自己控制
            template: formatName, 
            width: "250px", 
            filterable: { 
                cell: { 
                    showOperators: false,
                    // 自定义过滤函数
                    filter: function(e) {
                        // 把搜索值转成大写，和你的模板格式保持一致，避免大小写不匹配
                        const searchValue = e.filter.value?.toUpperCase() || '';
                        // 给数据源设置OR条件的过滤，同时匹配FirstName和LastName
                        e.dataSource.filter({
                            logic: "or",
                            filters: [
                                { field: "FirstName", operator: "contains", value: searchValue },
                                { field: "LastName", operator: "contains", value: searchValue }
                            ]
                        });
                    }
                } 
            } 
        },
    ], 
}); 

原理说明： #

当用户在过滤框输入内容时，这个自定义的filter函数会覆盖Grid的默认过滤行为，手动给数据源添加一个或逻辑的过滤规则，只要FirstName或LastName包含搜索值，该行就会被保留，完美实现同时搜索两个字段的需求。

方法二：在数据源中添加计算字段 #

如果你需要多次用到这个拼接后的Name字段（比如排序、过滤都要用到），可以提前在数据源里生成一个计算好的Name字段，让Grid直接基于这个字段做过滤：

$("#grid").kendoGrid({ 
    autoBind: true, 
    dataSource: { 
        data: tempData, 
        pageSize: 5,
        schema: {
            parse: function(data) {
                // 给每条数据添加拼接后的Name字段
                return data.map(item => ({
                    ...item,
                    Name: `${item.LastName.toUpperCase()}, ${item.FirstName.toUpperCase()}`
                }));
            }
        }
    }, 
    filterable: { mode: "row" }, 
    columns: [ 
        { 
            title: "Name", 
            field: "Name", // 现在直接用计算好的Name字段
            template: formatName, 
            width: "250px", 
            filterable: { cell: { showOperators: false } } 
        },
    ], 
}); 

原理说明： #

通过schema.parse方法，我们在数据加载时给每条记录新增了一个Name字段，内容和你的模板输出一致。此时Grid的过滤会直接针对这个Name字段，自然就能同时匹配FirstName和LastName的内容了，这种方法更简洁，适合需要复用拼接字段的场景。

额外提示： #

两种方法里都把搜索值转成了大写，这是为了和你模板里的toUpperCase()保持一致，避免出现用户输入小写但搜不到大写内容的情况，如果你不需要大小写不敏感的过滤，可以去掉转大写的逻辑。

内容的提问来源于stack exchange，提问作者John S.