zTree保持展开单一路径之简易实现

发布时间：2020-05-23 14:39:49 所属栏目：程序设计来源：互联网

导读：zTree是一款非常不错的树型插件，在以往的学习和最近的开发中都用到了，具有丰富和友好的接口。但保持展开单一路径不是通过配置实现的（ext是通过配置实现的，这样看上去更简单），而需要单独的代码实现（也许是为了更多的灵活性），官方给出的示例可以在这里

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>

（编辑：安卓应用网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!