Fancytree filter扩展过滤纯数字名称节点报错该如何解决?
问题原因
- Fancytree 2.38.0版本的
filterBranches方法存在参数重载逻辑:如果传入的第一个参数是数字类型,方法会判定为按节点key属性精确匹配,而不是按节点title模糊搜索。当输入纯数字内容时,若触发了参数的隐式类型转换,就会走错误的匹配逻辑。 - 如果树节点数据中纯数字名称的
title字段是Number类型而非String类型,过滤时内部调用字符串相关的匹配方法(如indexOf)会直接抛出类型错误,这是控制台报错的核心原因。
解决方法
按以下步骤修改即可:
1. 修改搜索触发逻辑,自定义匹配规则
替换原有的搜索绑定代码,强制转关键词为字符串、自定义匹配逻辑避免触发数字重载逻辑:
$("#TreeSearchMU").keypress(function(e){ if(e.which == 13) // 回车键触发搜索 { // 强制把搜索词转成字符串,避免纯数字内容被识别为节点key const searchVal = String($("#TreeSearchMU").val()).trim(); const tree = $.ui.fancytree.getTree("#treeMU"); // 自定义匹配规则,仅匹配节点标题 tree.filterBranches(function(node) { // 节点标题也强制转字符串,兼容后台返回数字类型title的情况 return String(node.title).includes(searchVal); }); } });
2. (可选)数据源预处理统一转title为字符串
如果接口返回的节点title本身是数字类型,建议在树初始化时新增loadFilter配置统一处理,避免其他功能也出现类似类型问题:
$("#treeMU").fancytree({ extensions: ["filter"], quicksearch: true, checkbox: true, keyboard: true, source: { url: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX", }, // 新增数据源预处理逻辑 loadFilter: function(data) { const formatNode = (node) => { node.title = String(node.title); // 递归处理子节点 if(Array.isArray(node.children)) { node.children.forEach(formatNode); } return node; } return data.map(formatNode); }, filter: { // 原有过滤配置保持不变 autoExpand: true, counter: true, hideExpandedCounter: true, hideExpanders: true, nodata: true, mode: "hide" }, });
内容的提问来源于stack exchange,提问作者SWAT 10101
相关产品推荐
相关产品推荐

