zTree是一款非常不错的树型插件，在以往的学习和最近的开发中都用到了，具有丰富和友好的接口。但保持展开单一路径不是通过配置实现的（ext是通过配置实现的，这样看上去更简单），而需要单独的代码实现（也许是为了更多的灵活性），官方给出的示例可以在这里查看。本文在其基础上对代码进行了修改，使其更加简洁，以满足自己的需求（可能考虑得不周全，请读者指证），以下是的具体实现：
实现思路：
在当前节点展开前折叠与当前节点处于同一级别的其它节点，这样就能保证同一级别中只有一个节点是展开的，实现单一路径展开。
实现代码：
functionsinglePath(currNode){
varcLevel=currNode.level;
//这里假设id是唯一的
varcId=currNode.id;
//此对象可以保存起来，没有必要每次查找
vartreeObj=$.fn.zTree.getZTreeObj("treeDemo");
//展开的所有节点，这是从父节点开始查找（也可以全文查找）
varexpandedNodes=treeObj.getNodesByParam("open",true,currNode.getParentNode());
for(vari=expandedNodes.length-1;i>=0;i--){
varnode=expandedNodes[i];
varlevel=node.level;
varid=node.id;
if(cId!=id&&level==cLevel){
treeObj.expandNode(node,false);
}
}
}
完整示例：
<!DOCTYPEhtml> <HTML> <HEAD> <TITLE>ZTREEDEMO-singlepath</TITLE> <Metahttp-equiv="content-type"content="text/html;charset=UTF-8"> <linkrel="stylesheet"href="../../../css/demo.css"type="text/css"> <linkrel="stylesheet"href="../../../css/zTreeStyle/zTreeStyle.css"type="text/css"> <scripttype="text/javascript"src="../../../js/jquery-1.4.4.min.js"></script> <scripttype="text/javascript"src="../../../js/jquery.ztree.core-3.4.js"></script> <!--<scripttype="text/javascript"src="../../../js/jquery.ztree.excheck-3.4.js"></script> <scripttype="text/javascript"src="../../../js/jquery.ztree.exedit-3.4.js"></script>--> <SCRIPTtype="text/javascript"> <!-- varsetting={ view:{ dblClickExpand:true,showLine:true },data:{ simpleData:{ enable:true } },callback:{ beforeExpand:beforeExpand } }; varzNodes=[ {id:1,pId:0,name:"根1Root"},{id:11,pId:1,name:"父节点1-1"},{id:111,pId:11,name:"叶子节点1-1-1"},{id:1111,pId:111,name:"叶子节点1-1-1-1"},{id:1112,name:"叶子节点1-1-1-2"},{id:1113,name:"叶子节点1-1-1-3"},{id:112,name:"叶子节点1-1-2"},{id:1121,pId:112,name:"叶子节点1-1-2-1"},{id:1122,name:"叶子节点1-1-2-2"},{id:1123,name:"叶子节点1-1-2-3"},{id:113,name:"叶子节点1-1-3"},{id:114,name:"叶子节点1-1-4"},{id:12,name:"父节点1-2"},{id:121,pId:12,name:"叶子节点1-2-1"},{id:1211,pId:121,name:"叶子节点1-2-1-1"},{id:1212,name:"叶子节点1-2-1-2"},{id:1213,name:"叶子节点1-2-1-3"},{id:122,name:"叶子节点1-2-2"},{id:1221,pId:122,name:"叶子节点1-2-2-1"},{id:1222,name:"叶子节点1-2-2-2"},{id:1223,name:"叶子节点1-2-2-3"},{id:123,name:"叶子节点1-2-3"},{id:124,name:"叶子节点1-2-4"},{id:2,name:"根2Root"},{id:21,pId:2,name:"父节点2-1"},{id:211,pId:21,name:"叶子节点2-1-1"},{id:212,name:"叶子节点2-1-2"},{id:213,name:"叶子节点2-1-3"},{id:214,name:"叶子节点2-1-4"},{id:22,name:"父节点2-2"},{id:221,pId:22,name:"叶子节点2-2-1"},{id:222,name:"叶子节点2-2-2"},{id:223,name:"叶子节点2-2-3"},{id:224,name:"叶子节点2-2-4"} ]; functionbeforeExpand(treeId,treeNode){ singlePath(treeNode); } functionsinglePath(currNode){ varcLevel=currNode.level; //这里假设id是唯一的 varcId=currNode.id; //此对象可以保存起来，没有必要每次查找 vartreeObj=$.fn.zTree.getZTreeObj("treeDemo"); //展开的所有节点，这是从父节点开始查找（也可以全文查找） varexpandedNodes=treeObj.getNodesByParam("open",false); } } } $(document).ready(function(){ $.fn.zTree.init($("#treeDemo"),setting,zNodes); }); //--> </SCRIPT> <styletype="text/css"> .ztreelibutton.switch{visibility:hidden;width:1px;} .ztreelibutton.switch.roots_docu{visibility:visible;width:16px;} .ztreelibutton.switch.center_docu{visibility:visible;width:16px;} .ztreelibutton.switch.bottom_docu{visibility:visible;width:16px;} </style> </HEAD> <BODY> <h1>保持展开单一路径</h1> <h6>[文件路径:super/singlepath.html]</h6> <divclass="content_wrap"> <divclass="zTreeDemoBackgroundleft"> <ulid="treeDemo"class="ztree"></ul> </div> <divclass="right"> <ulclass="info"> <liclass="title"><h2>@R_301_369@说明</h2> <ulclass="list"> <li>此Demo是在"单击展开/折叠节点"基础上改造而来，树节点保持始终只展开一条路径。</li> <liclass="highlight_red">利用setting.callback.beforeExpand/onExpand事件回调函数实现展开规则</li> </ul> </li> </ul> </div> </div> </BODY> </HTML>原文链接：https://www.f2er.com/javaschema/286551.html
