jquery的插件之zTree———不同的方法展现树

ztree的官网：ztree .me

 

1、使用zTree需要引入的样式

<!-- 引入的是ztree的样式文件 -->
<link rel="stylesheet" href="${pageContext.request.contextPath }/js/ztree/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/ztree/jquery.ztree.all-3.5.js"></script>

2、使用标准json数据构造zTree

       

<div title="面板二">
			 <!--  展示ztree效果，使用标准json数据结构ztree
			 ul标签的作用：需要在ul这个位置展现一棵树 -->
			 <ul id="ztree1" class="ztree"></ul>
			 书写树的js样式
			 <script type="text/javascript">
			  $(function(){
				  //页面加载完成后，执行这段代码——动态创建ztree
				  var setting={};
				  //构造节点数据
				  var zNodes=[{"name":"节点一","children":[
				                                        {"name":"节点一_1"},
				                                        {"name":"节点二_2"}
				                                        ]},//每个json对象表示一个节点数据
				                {"name":"节点二"},
				                {"name":"节点三"}
				              ];
				  //调用api初始化ztree
				  $.fn.zTree.init($("#ztree1"),setting,zNodes);           
		  	  });
			 </script>
			</div>

3、使用简单json数据构造zTree

<div title="面板三">
					<!--  展示ztree效果，使用标准json数据结构ztree -->
					 <ul id="ztree2" class="ztree"></ul>
					 <script type="text/javascript">
					  $(function(){
						  //页面加载完成后，执行这段代码——动态创建ztree
						  var setting2={
								  data:{
									  simpleData:{
										  enable:true//使用简单json数据构造ztree节点
									  }
								  }
						  };
						  //构造节点数据
						  var zNodes2=[ {"id":"1","pId":"0","name":"节点一"},
						                {"id":"2","pId":"1","name":"节点二"},
						                {"id":"3","pId":"2","name":"节点三"}
						              ];
						  //调用api初始化ztree
						  $.fn.zTree.init($("#ztree2"),setting2,zNodes2);           
				  	  });
					 </script>
			</div>

 

4、发送ajax请求获取简单json数据构造ztree

 

<div title="面板四">
			<!--    展示ztree效果：发送ajax请求获取简单json数据结构ztree -->
			<ul id="ztree3" class="ztree"></ul>
			<script type="text/javascript">
			  $(function(){
				  //页面加载完成后，执行这段代码——动态创建ztree
				  var setting3={
						  data:{
							  simpleData:{
								  enable:true//是否使用简单json数据构造ztree
							  }
						  }
				  };
				  //发送ajax请求，获取json数据
				  var url="$(pageContext.request.contextPath)/json/menu.json";
				  $.post(url,{},function(data){
					  //调用api初始化ztree
					  $.fn.zTree.init($("#ztree3"),setting3,data);
				  },'json');
			  });
			</script>
			</div>

5、使用ztree提供的api为节点绑定事件

为节点四绑定一个点击事件

 //使用ztree提供的api为节点绑定事件
						  callback:{
							  //为ztree节点绑定单击事件.传入三个参数，最重要的是treeNode，这是一个对象
							  onClick:function(event,treeId,treeNode){
								  if(treeNode.page != undefined){
									  //判断选项卡是否存在
									  var e=$("#mytabs").tabs("exists",treeNode.name);
									  if(e){
										//已经存在，选中
										$("#mytabs").tabs("select",treeNode.name);
									  }elst{
										  //动态添加一个选项卡
										  $("#mytabs").tabs("add",{
											  title:treeNode.name,
											  closable:true,
											  content:'<iframe frameborder="0" height="100%" width="100%" src="'+treeNode.page+'"></iframe>'
										  });
									  }
									  
								  }
							  }
						  
							  
						  }