You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Fancytree filter扩展过滤纯数字名称节点报错该如何解决?

问题原因
  1. Fancytree 2.38.0版本的filterBranches方法存在参数重载逻辑:如果传入的第一个参数是数字类型,方法会判定为按节点key属性精确匹配,而不是按节点title模糊搜索。当输入纯数字内容时,若触发了参数的隐式类型转换,就会走错误的匹配逻辑。
  2. 如果树节点数据中纯数字名称的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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.02 11:06:03