解决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 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...