解决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 简单抽屉效果的实现代码
Mar 09 Javascript
jquery时间下拉框小例子
Apr 15 Javascript
JS获取html对象的几种方式介绍
Dec 05 Javascript
JavaScript 事件对象介绍
Apr 13 Javascript
javascript字符串循环匹配实例分析
Jul 17 Javascript
基于javascript实现页面加载loading效果
Sep 15 Javascript
select自定义小三角样式代码(实用总结)
Aug 18 Javascript
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
vue-cli3.0 环境变量与模式配置方法
Nov 08 Javascript
vue中利用Promise封装jsonp并调取数据
Jun 18 Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
Apr 21 Javascript
JS+CSS实现动态时钟
Feb 19 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
一个从别的网站抓取信息的例子(域名查询)
2006/10/09 PHP
PHP编码规范-php coding standard
2007/03/16 PHP
php将数据库中的电话号码读取出来并生成图片
2008/08/31 PHP
PHP版本如何选择?应该使用哪个版本?
2015/05/13 PHP
Laravel实现表单提交
2017/05/07 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
详解PHP字符串替换str_replace()函数四种用法
2017/10/13 PHP
javascript 日历提醒系统( 兼容所有浏览器 )
2009/04/07 Javascript
javascript是怎么继承的介绍
2012/01/05 Javascript
js调试系列 源码定位与调试[基础篇]
2014/06/18 Javascript
jQuery的text()方法用法分析
2014/12/20 Javascript
七夕情人节丘比特射箭小游戏
2015/08/20 Javascript
理解javascript函数式编程中的闭包(closure)
2016/03/08 Javascript
JavaScript代码实现左右上下自动晃动自动移动
2016/04/08 Javascript
原生js编写autoComplete插件
2016/04/13 Javascript
浅谈JS继承_寄生式继承 &amp; 寄生组合式继承
2016/08/16 Javascript
javascript实现数据双向绑定的三种方式小结
2017/03/09 Javascript
浅谈webpack下的AOP式无侵入注入
2017/11/12 Javascript
JavaScript 判断对象中是否有某属性的常用方法
2018/06/14 Javascript
使用webpack4编译并压缩ES6代码的方法示例
2019/04/24 Javascript
vue单页应用的内存泄露定位和修复问题小结
2019/08/02 Javascript
swiper实现异形轮播效果
2019/11/28 Javascript
uniapp微信小程序实现一个页面多个倒计时
2020/11/01 Javascript
通过Python实现自动填写调查问卷
2017/09/06 Python
python定向爬虫校园论坛帖子信息
2018/07/23 Python
用Python解决x的n次方问题
2019/02/08 Python
Python弹出输入框并获取输入值的实例
2019/06/18 Python
Python字典对象实现原理详解
2019/07/01 Python
用python按照图像灰度值统计并筛选图片的操作(PIL,shutil,os)
2020/06/04 Python
Python中的With语句的使用及原理
2020/07/29 Python
Python爬虫自动化爬取b站实时弹幕实例方法
2021/01/26 Python
html5+css3之制作header实例与更新
2020/12/21 HTML / CSS
好人好事演讲稿
2014/09/01 职场文书
初中学生操行评语
2014/12/26 职场文书
Nginx URL重写rewrite机制原理及使用实例
2021/04/01 Servers
深入浅析Django MTV模式
2021/09/04 Python