效果图：
代码：
<!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - single path</TITLE> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="../../../css/demo.css" type="text/css"> <link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css"> <script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script> <!-- <script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script> <script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>--> <SCRIPT type="text/javascript"> <!-- var setting = { view: { dblClickExpand: false, showLine: false }, data: { simpleData: { enable: true } }, callback: { beforeExpand: beforeExpand, onExpand: onExpand, onClick: onClick } }; function createNodes(maxNodesNumInLevel, maxLevel, curLevel, curPId) { if (maxNodesNumInLevel<5) { maxNodesNumInLevel = 5; } var nodes = [], num = 0; while(num<3) { num = parseInt(Math.random()*1024)%maxNodesNumInLevel+1; } for (var i=0; i<num; i++) { var id = curPId ? curPId + "-" + i : "" + i, isParent = (parseInt(Math.random()*9999)%3!=0), node = {id: id, pId : curPId, name : "N" + id}; nodes.push(node); if (isParent && curLevel<maxLevel) { nodes = nodes.concat(createNodes(maxNodesNumInLevel, maxLevel, curLevel+1, id)); } } return nodes; } var zNodes =createNodes(5, 5, 0); var curExpandNode = null; function beforeExpand(treeId, treeNode) { var pNode = curExpandNode ? curExpandNode.getParentNode():null; var treeNodeP = treeNode.parentTId ? treeNode.getParentNode():null; var zTree = $.fn.zTree.getZTreeObj("treeDemo"); for(var i=0, l=!treeNodeP ? 0:treeNodeP.children.length; i<l; i++ ) { if (treeNode !== treeNodeP.children[i]) { zTree.expandNode(treeNodeP.children[i], false); } } while (pNode) { if (pNode === treeNode) { break; } pNode = pNode.getParentNode(); } if (!pNode) { singlePath(treeNode); } } function singlePath(newNode) { if (newNode === curExpandNode) return; var zTree = $.fn.zTree.getZTreeObj("treeDemo"), rootNodes, tmpRoot, tmpTId, i, j, n; if (!curExpandNode) { tmpRoot = newNode; while (tmpRoot) { tmpTId = tmpRoot.tId; tmpRoot = tmpRoot.getParentNode(); } rootNodes = zTree.getNodes(); for (i=0, j=rootNodes.length; i<j; i++) { n = rootNodes[i]; if (n.tId != tmpTId) { zTree.expandNode(n, false); } } } else if (curExpandNode && curExpandNode.open) { if (newNode.parentTId === curExpandNode.parentTId) { zTree.expandNode(curExpandNode, false); } else { var newParents = []; while (newNode) { newNode = newNode.getParentNode(); if (newNode === curExpandNode) { newParents = null; break; } else if (newNode) { newParents.push(newNode); } } if (newParents!=null) { var oldNode = curExpandNode; var oldParents = []; while (oldNode) { oldNode = oldNode.getParentNode(); if (oldNode) { oldParents.push(oldNode); } } if (newParents.length>0) { zTree.expandNode(oldParents[Math.abs(oldParents.length-newParents.length)-1], false); } else { zTree.expandNode(oldParents[oldParents.length-1], false); } } } } curExpandNode = newNode; } function onExpand(event, treeId, treeNode) { curExpandNode = treeNode; } function onClick(e,treeId, treeNode) { var zTree = $.fn.zTree.getZTreeObj("treeDemo"); zTree.expandNode(treeNode, null, null, null, true); } $(document).ready(function(){ $.fn.zTree.init($("#treeDemo"), setting, zNodes); }); //--> </SCRIPT> <style type="text/css"> .ztree li button.switch {visibility:hidden; width:1px;} .ztree li button.switch.roots_docu {visibility:visible; width:16px;} .ztree li button.switch.center_docu {visibility:visible; width:16px;} .ztree li button.switch.bottom_docu {visibility:visible; width:16px;} </style> </HEAD> <BODY> <h1>保持展开单一路径</h1> <h6>[ 文件路径: super/singlepath.html ]</h6> <div class="content_wrap"> <div class="zTreeDemoBackground left"> <ul id="treeDemo" class="ztree"></ul> </div> <div class="right"> <ul class="info"> <li class="title"><h2>实现方法说明</h2> <ul class="list"> <li>此 Demo 是在 "单击展开/折叠节点" 基础上改造而来，树节点保持始终只展开一条路径。</li> <li class="highlight_red">利用 setting.callback.beforeExpand / onExpand 事件回调函数实现展开规则</li> </ul> </li> </ul> </div> </div> </BODY> </HTML>
