ztree 的模糊查询

最新推荐文章于 2025-06-10 09:02:43 发布

感谢相遇。�

最新推荐文章于 2025-06-10 09:02:43 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签： ztree的模糊查询

本文链接：https://blog.youkuaiyun.com/weixin_43853787/article/details/87936446

这段代码展示了如何在zTree中实现模糊查询功能。当在搜索框中输入关键词时，它会高亮显示匹配的节点，并展开包含匹配节点的路径。同时，代码还包括了对正则表达式元字符的处理和节点显示的控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//实现模糊查询功能
   function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
       fuzzySearch('treeDemo','#keyword',null,true);
       };
       function fuzzySearch(zTreeId, searchField, isHighLight, isExpand){
           var zTreeObj = $.fn.zTree.getZTreeObj(zTreeId);//获取树对象
           if(!zTreeObj){
               alter("获取树对象失败");
           }
           var nameKey = zTreeObj.setting.data.key.name; //获取name属性的key
           isHighLight = isHighLight===false?false:true;//除直接输入false的情况外,都默认为高亮
           isExpand = isExpand?true:false;
           zTreeObj.setting.view.nameIsHTML = isHighLight;//允许在节点名称中使用html,用于处理高亮

           var metaChar = '[\\[\\]\\\\\^\\$\\.\\|\\?\\*\\+\$\$]'; //js正则表达式元字符集
           var rexMeta = new RegExp(metaChar, 'gi');//匹配元字符的正则表达式

           // 过滤ztree显示数据
           function ztreeFilter(zTreeObj,_keywords,callBackFunc) {
               if(!_keywords){
                   _keywords =''; //如果为空，赋值空字符串
               }

               // 查找符合条件的叶子节点
               function filterFunc(node) {
                   if(node && node.oldname && node.oldname.length>0){
                       node[nameKey] = node.oldname; //如果存在原始名称则恢复原始名称
                   }
                   //node.highlight = false; //取