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


Posted in Javascript onJuly 05, 2017

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

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, pId:11, name:"状态B"},
    { id:12, pId:1, name:"日志"},
    { id:121, pId:12, name:"操作类型"},
    { id:122, pId:12, name:"操作结果"},
    { id:1221, pId:122, name:"操作结果1"},
    { id:1222, pId:122, name:"操作结果2"},
    { id:12221, pId:1222, name:"操作结果21"},
    { id:12222, pId:1222, name:"操作结果22"},
    { id:12223, pId:1222, name:"操作结果23"},
    { id:2, pId:0, name:"业务参数",open:true},
    { id:21, pId:2, name:"工单类型"},
    { id:22, pId:2, name:"监控类型"},
    { id:23, pId:22, name:"监控子类型1"},
    { id:24, pId:22, name:"监控子类型2"},
    { id:25, pId:24, name:"监控子子类型1"},
    { id:26, pId:24, 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; i<l; i++) {
      nodeList[i].highlight = highlight;
      zTree.updateNode(nodeList[i]);
      if (!nodeList[i].isParent && !parentNode.contains(nodeList[i].getParentNode().pId)) {
        zTree.expandNode(nodeList[i].getParentNode(), true, true, true);
        parentNode.push(nodeList[i].getParentNode().pId);
        console.log(nodeList[i].getParentNode().pId);
      } else {
        zTree.expandNode(nodeList[i], true, true, true);
      }
    }
    console.log(parentNode);
  }
  Array.prototype.contains = function (obj) {
    var i = this.length;
    while (i--) {
      if (this[i] === obj) {
        return true;
      }
    }
    return false;
  }
  function getFontCss(treeId, treeNode) {
    return (!!treeNode.highlight) ? {color:"#A60000", "font-weight":"bold"} : {color:"#333", "font-weight":"normal"};
  }
  var key;
  $(document).ready(function(){
    $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    key = $("#search_name");
    key.bind("blur", searchNode);
  });

效果图

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

以上所述是小编给大家介绍的ztree搜索中多级菜单展示不全的解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript学习网址备忘
May 29 Javascript
jQuery使用一个按钮控制图片的伸缩实现思路
Apr 19 Javascript
jQuery(js)获取文字宽度(显示长度)示例代码
Dec 31 Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
Mar 22 Javascript
简单理解vue中track-by属性
Oct 26 Javascript
Bootstrap源码解读排版(1)
Dec 23 Javascript
原生JS实现图片懒加载(lazyload)实例
Jun 13 Javascript
vue2.0 如何在hash模式下实现微信分享
Jan 22 Javascript
JavaScript判断浏览器运行环境的详细方法
Jun 30 Javascript
微信小程序实现定位及到指定位置导航的示例代码
Aug 20 Javascript
vue项目中定义全局变量、函数的几种方法
Nov 08 Javascript
JavaScript onclick事件使用方法详解
May 15 Javascript
JS FormData上传文件的设置方法
Jul 05 #Javascript
JS实现unicode和UTF-8之间的互相转换互转
Jul 05 #Javascript
js 获取元素的具体样式信息getcss(实例讲解)
Jul 05 #Javascript
Angular 2父子组件数据传递之@Input和@Output详解(下)
Jul 05 #Javascript
使用prop解决一个checkbox选中后再次选中失效的问题
Jul 05 #Javascript
JS鼠标滚动分页效果示例
Jul 05 #Javascript
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 #jQuery
You might like
linux系统下php安装mbstring扩展的二种方法
2014/01/20 PHP
php使用sql server验证连接数据库的方法
2014/12/25 PHP
屏蔽PHP默认设置中的Notice警告的方法
2016/05/20 PHP
浅谈Laravel中的一个后期静态绑定
2017/08/11 PHP
Javascript miscellanea -display data real time, using window.status
2007/01/09 Javascript
js 操作select相关方法函数
2009/12/06 Javascript
javascript:history.go()和History.back()的区别及应用
2012/11/25 Javascript
杨氏矩阵查找的JS代码
2013/03/21 Javascript
JS实现点击链接取消跳转效果的方法
2014/01/24 Javascript
iframe窗口高度自适应的又一个巧妙实现思路
2014/04/04 Javascript
jquery通过visible来判断标签是否显示或隐藏
2014/05/08 Javascript
jquery得到iframe src属性值的方法
2014/09/25 Javascript
jQuery滚动条插件nanoscroller使用指南
2015/04/21 Javascript
js实现微信分享代码
2020/10/11 Javascript
简单模拟node.js中require的加载机制
2016/10/27 Javascript
javascript实现文字无缝滚动
2016/12/27 Javascript
微信小程序使用modal组件弹出对话框功能示例
2017/11/29 Javascript
如何更好的编写js async函数
2018/05/13 Javascript
Python 面向对象 成员的访问约束
2008/12/23 Python
从零学python系列之从文件读取和保存数据
2014/05/23 Python
Python中使用PIL库实现图片高斯模糊实例
2015/02/08 Python
Python实现的计数排序算法示例
2017/11/29 Python
Python测试网络连通性示例【基于ping】
2018/08/03 Python
Python实现的json文件读取及中文乱码显示问题解决方法
2018/08/06 Python
Python中fnmatch模块的使用详情
2018/11/30 Python
学python安装的软件总结
2019/10/12 Python
Python 2.6.6升级到Python2.7.15的详细步骤
2020/12/14 Python
白色公司:The White Company
2017/10/11 全球购物
Herve Leger官网:标志性绷带连衣裙等
2018/12/26 全球购物
中学实习教师自我鉴定
2013/12/12 职场文书
大学生通用个人的自我评价
2014/02/10 职场文书
省级优秀班集体申报材料
2014/05/25 职场文书
英语课外活动总结
2014/08/27 职场文书
2014大学辅导员工作总结
2014/12/02 职场文书
五四青年节活动总结
2015/02/10 职场文书
2016七夕情人节广告语
2016/01/28 职场文书