微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

解决ztree搜索中多级菜单展示不全问题

ztree 官网的中的 Search Nodes 例子中,所有菜单都是连着的,如果出现某个菜单下无子节点,那么在搜索时,此节点便不会自动展开,这里给出对应的增强版代码

rush:js;"> var setting = { data: { key: { title: "t" },simpleData: { enable: true } },view: { fontCss: getFontCss } }; var zNodes =[ { id:1,pId:0,name:"系统参数",open:true},{ id:11,pId:1,name:"通用参数"},{ id:111,pId:11,name:"状态A"},{ id:112,name:"状态B"},{ id:12,name:"日志"},{ id:121,pId:12,name:"操作类型"},{ id:122,name:"操作结果"},{ id:1221,pId:122,name:"操作结果1"},{ id:1222,name:"操作结果2"},{ id:12221,pId:1222,name:"操作结果21"},{ id:12222,name:"操作结果22"},{ id:12223,name:"操作结果23"},{ id:2,name:"业务参数",{ id:21,pId:2,name:"工单类型"},{ id:22,name:"监控类型"},{ id:23,pId:22,name:"监控子类型1"},{ id:24,name:"监控子类型2"},{ id:25,pId:24,name:"监控子子类型1"},{ id:26,name:"监控子子类型2"},]; var lastValue = '',nodeList = [],fontCss = {}; function searchNode(e) { var zTree = $.fn.zTree.getZTreeObj("treeDemo"); var value = $.trim(key.val()); lastValue = value; //zTree.expandAll(true); $('#treeDemo').html(""); $.fn.zTree.init($("#treeDemo"),setting,zNodes); if (value != "") { nodeList = zTree.getNodesByParamFuzzy("name",value); } else { nodeList = zTree.getNodesByParamFuzzy("name","|||||||||||||||"); } updateNodes(true); } var parentNode = []; function updateNodes(highlight) { var zTree = $.fn.zTree.getZTreeObj("treeDemo"); parentNode = []; for( var i=0,l=nodeList.length; inormal"}; } var key; $(document).ready(function(){ $.fn.zTree.init($("#treeDemo"),zNodes); key = $("#search_name"); key.bind("blur",searchNode); });

效果

这里写图片描述

以上所述是小编给大家介绍的ztree搜索中多级菜单展示不全的解决方法。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

原文地址:https://www.jb51.cc/js/38107.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐