【学习拾遗】Jquery（三）--ztree

最新推荐文章于 2023-04-28 10:43:00 发布

zllaptx4869

最新推荐文章于 2023-04-28 10:43:00 发布

阅读量893

点赞数 1

分类专栏：【HTML+JS】

本文链接：https://blog.csdn.net/zhangleilei4869/article/details/46277933

版权

【HTML+JS】专栏收录该内容

17 篇文章 0 订阅

订阅专栏

　　上个项目中，做树用的是EasyUI的Tree，想起来以前看到的ztree，正好趁着回顾Jquery和ztree混个脸熟！

一、实现

样式和Js文件

<script type="text/javascript" src="jquery-1.11.3.js"></script>
<script type="text/javascript" src="js/jquery.ztree.all-3.5.js"></script>
<link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">

html和Js

<body>
	<div id="tree" class="ztree">div1</div>
</body>
<script type="text/javascript">
	

	$(function(){
		//设置节点源
		var nodes = [
					//{id:"1", pId:"0", name: "父节点1",nodeurl:"www.baidu.com"},
					{id:"11", pId:"1", name: "用户管理",nodeurl:"www.baidu.com"},
					{id:"111", pId:"11", name: "添加用户",nodeurl:"www.baidu.com"},
					{id:"112", pId:"11", name: "修改用户",nodeurl:"www.baidu.com"},
					{id:"113", pId:"11", name: "删除用户",nodeurl:"www.baidu.com"},
					{id:"12", pId:"1", name: "部门管理",nodeurl:"www.baidu.com"},
					{id:"121", pId:"12", name: "添加部门",nodeurl:"www.baidu.com"},
					{id:"122", pId:"12", name: "删除部门",nodeurl:"www.baidu.com"}
				];
		//ztree的配置信息
		var setting={
			view: {
				dblClickExpand: true,//双击节点，展开
				showLine: true,
				selectedMulti: false
			},
			data: {
				simpleData: {
					enable:true,
					idKey: "id",
					pIdKey: "pId",
					rootPId: ""
				}
			},
			callback:{
				onClick:zTreeOnClick,
				beforeExpand:zTreeBeforeExpand 
			}
		}
		
		
		
		//var t = $("#tree");
		//t = $.fn.zTree.init(t, setting, nodes);//初始化节点信息
		
		
		t=$.fn.zTree.init($("#tree"),setting,nodes);

		
		//var zTree = $.fn.zTree.getZTreeObj("tree");
		
		//设置选中的节点
		//zTree.selectNode(zTree.getNodeByParam("id", 1));
		
		//设置展开哪个节点,其中第一个参数，表示是否展开节点，第二个参数表示子节点是否也同样展开，第三个参数
		t.expandNode(t.getNodeByParam("id", 11), true, true, false);
		
		var treeObj = $.fn.zTree.getZTreeObj("tree");
		//var nodelist = treeObj.getNodes();
		
		//alert(nodelist.length)
		
		//ztree响应单击函数
		function zTreeOnClick(event, treeId, treeNode) {	
		alert(treeNode.getParentNode().name+"的第"+t.getNodeIndex(treeNode)+"个节点------"+"节点ID："+treeNode.id + "-------节点名称 " + treeNode.name);
			
			//获取节点级别
			//alert(treeNode.level)
				
			//var Idnode = treeObj.getNodeByTId("11");
			//alert(Idnode.name)
		};
		
		function zTreeBeforeExpand(treeId, treeNode){
		    var treeObj = $.fn.zTree.getZTreeObj("tree");
			//treeObj.expandAll(false);
			var nodelists=treeObj.getNodes();
			for(var i=0;i<nodelists.length;i++){
				//alert(nodelists[i].id+"----"+nodelists[i].name)
				//alert(treeObj.getNodeByParam("id",nodelists[i].id,null).level)
			}
		}
	})
</script>

代码注释已经很明白了，大致的流程就是

1、setting设置，设置树的Id，父Id以及节点名称所用的字段

2、准备菜单数据，这里简单json格式的（和Easyui的一模一样）

3、初始化树

4、操作tree