KendoGrid数字字段自定义Between过滤器触发TypeError异常，求解决方法

这个报错Uncaught TypeError: $[(u || "eq").toLowerCase(...)] is not a function的核心原因很明确：Kendo Grid默认的过滤操作符集合里并没有"between"这个选项，当你尝试使用这个未注册的操作符时，框架找不到对应的处理函数，就会抛出这个错误。下面给你两种可靠的解决方案，按需选择：

方案1：注册自定义"between"操作符 #

直接给Kendo的数字类型过滤器添加"between"操作符，定义它的显示文本和过滤逻辑：

// 注册自定义between操作符
kendo.data.Filterable.fn.options.operators.number.between = {
  text: "Between", // 过滤器下拉框显示的文本
  filter: function(value, filters) {
    // value是当前单元格的数值，filters是用户输入的范围数组
    // 确保值是数字类型，避免字符串比较问题
    const numValue = parseFloat(value);
    const min = parseFloat(filters[0]);
    const max = parseFloat(filters[1]);
    
    // 处理空值：如果任一输入为空，不应用过滤
    if (isNaN(min) || isNaN(max)) return true;
    
    return numValue >= min && numValue <= max;
  }
};

然后在Grid列的过滤配置中使用这个操作符：

columns: [
  {
    field: "yourNumericField", // 替换成你的数字字段名
    title: "数值字段",
    filterable: {
      operators: {
        number: {
          between: "Between" // 关联我们注册的操作符
        }
      },
      ui: function(element) {
        element.empty();
        // 创建两个输入框用于输入范围
        const $minInput = $('<input class="k-textbox" placeholder="最小值">');
        const $maxInput = $('<input class="k-textbox" placeholder="最大值">');
        element.append($minInput).append($maxInput);
        
        // 绑定输入事件触发过滤
        element.on("change", "input", function() {
          const min = $minInput.val();
          const max = $maxInput.val();
          const grid = $("#yourGridId").data("kendoGrid"); // 替换成你的Grid ID
          
          if (min && max) {
            grid.dataSource.filter({
              field: "yourNumericField",
              operator: "between",
              value: [min, max] // 把两个值作为数组传递给过滤器
            });
          } else {
            // 清空过滤器
            grid.dataSource.filter({});
          }
        });
      }
    }
  }
]

方案2：使用内置的Range过滤器（推荐） #

如果你的Kendo UI版本较新（2017及以后），其实已经内置了范围过滤UI，不需要自己写复杂的自定义逻辑，直接配置即可：

columns: [
  {
    field: "yourNumericField",
    title: "数值字段",
    filterable: {
      ui: "range" // 启用内置的范围过滤UI，自动生成两个输入框
    }
  }
]

这个方案更简洁，Kendo会自动处理gte（大于等于）和lte（小于等于）的组合过滤，完全避开自定义操作符的兼容性问题。

额外注意事项 #

• 确保输入值转换为数字类型：用户输入的是字符串，直接用于数值比较会出错，所以要通过parseFloat()转换后再使用。
• 远程过滤适配：如果你的Grid使用的是远程数据源（比如通过Ajax请求后端），需要确保后端接口支持接收gte和lte的过滤参数，或者支持between操作符的处理逻辑。
• 空值处理：当用户清空输入框时，记得清空过滤器，避免出现意外的过滤结果。

内容的提问来源于stack exchange，提问作者Vijayakumar Natarajan