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>实现方法说明</h2>
<ulclass="list">
<li>此Demo是在"单击展开/折叠节点"基础上改造而来，树节点保持始终只展开一条路径。</li>
<liclass="highlight_red">利用setting.callback.beforeExpand/onExpand事件回调函数实现展开规则</li>
</ul>
</li>
</ul>
</div>
</div>
</BODY>
</HTML>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。