解决ztree搜索中多级菜单展示不全问题
时间:2019-03-30
本文章向大家介绍解决ztree搜索中多级菜单展示不全问题,主要包括解决ztree搜索中多级菜单展示不全问题使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
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搜索中多级菜单展示不全的解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- 1455: 罗马游戏
- SQL Server 高性能写入的一些总结
- 3389: [Usaco2004 Dec]Cleaning Shifts安排值班
- 1754: [Usaco2005 qua]Bull Math
- 3377: [Usaco2004 Open]The Cow Lineup 奶牛序列
- 3301: [USACO2011 Feb] Cow Line
- SQL Server 索引和表体系结构(包含列索引)
- TiDB 源码阅读系列文章(七)基于规则的优化
- 博弈论入门之nim游戏
- 1477: 青蛙的约会
- 2045: 双亲数
- 树莓派常用文本编辑器
- BZOJ1299: [LLH邀请赛]巧克力棒(Nim游戏)
- 2301: [HAOI2011]Problem b
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法