解决ztree搜索中多级菜单展示不全问题
来源:互联网 发布:端口波特率修改工具 编辑:程序博客网 时间:2024/06/09 18:31
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, false, 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); });
效果演示图
阅读全文
0 0
- 解决ztree搜索中多级菜单展示不全问题
- Dialog中,文字展示不全的问题
- 解决TrackPopupMenu显示菜单不全的问题
- springmvc ztree 实现权限菜单的展示
- Java遍历AD用户,解决用户搜索不全的问题
- 多级ztree
- 用fastjson为Ztree生成多级树形菜单JSON数据源
- 同一个listview上下展示不同布局,解决两个listview上下显示不全问题
- PHP中多维数组var_dump展示不全
- 解决ubuntu 中man手册不全的问题!!!
- 解决LR结果分析中地址显示不全问题
- 重写TextView解决HorizontalScrollView中TextView显示不全的问题
- ScrollView中嵌入Listview,当item高度不一样的时候,item展示不全问题
- 有关android中多级联动问题的解决
- 有关android中多级联动问题的解决
- qtp菜单显示不全的问题
- javascript 右键菜单 支持多级菜单 支持不同节点展示不同菜单 兼容firefox和IE
- javascript 右键菜单 支持多级菜单 支持不同节点展示不同菜单 兼容firefox和IE
- jQuery+zTree加载树形结构菜单
- JsTreeの使用-yellowcong
- netowrkx备忘笔记
- Java-设计模式-工厂模式浅谈(〇)
- SpringBoot集成MyBatisPlus
- 解决ztree搜索中多级菜单展示不全问题
- Linux命令大全(1)----系统管理相关命令
- android listview 滑动到底部和监听滑动到顶部底部
- java中Scanner类nextLine()和next()的区别和使用方法
- 开篇介绍和工程目录结构-(从零开始搭建android框架系列(1))
- eventbus打包时报错
- springboot+freemarker 增加自定义变量和自定义
- android studio 升级后,经常会对gradle升级,然后编译原来程序会出现gradle版本太老的问题
- 最快的字节级比较方法memcmp.c反汇编分析