时间:2021-05-18
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搜索中多级菜单展示不全的解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
首先给大家展示下效果图,喜欢的朋友继续往下看哦。这是一款简单但实用的多级垂直手风琴下拉列表菜单。该多级手风琴菜单完全使用CSS来制作,它通过将不同的子菜单进行分
Ztree行政地区树状展示(点击加载)效果如下:开始贴代码:实体类Item,用于对Ztree的节点展示publicclassItem{privateString
在JavaWeb的相关开发中经常会涉及到多级菜单的展示,为了方便菜单的管理需要使用数据库进行支持,本例采用相关算法讲数据库中的条形记录进行相关组装和排序讲菜单组
word多级列表在菜单栏中,具体设置步骤是: 1、在新建的word中,标题中是没有多级列表的,它是不带有第几级的显示的,这种多级列表是需要去设置的; 2、点
一.概述本文介绍了JQuery巧妙实现多级菜单中当前菜单不随页面跳转样式发生变化,貌似没看懂啥意思?看图说话:就是点二级或多级菜单时,父级展开,当前菜单是被选中