jquery ztree的使用

1、在页面中引入ztree相关的文件

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

2、使用标准json数据构造ztree（了解）

<!-- 展示ztree效果 :使用标准json数据构造ztree-->
				<ul id="ztree1" class="ztree"></ul>
				<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>

效果：

            

3、使用简单json数据构造ztree（重点）

<!-- 展示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":"2","name":"节点一"},//每个json对象表示一个节点数据
							              {"id":"2","pId":"3","name":"节点二"},
							              {"id":"3","pId":"0","name":"节点三"}
						              ];
						//调用API初始化ztree
						$.fn.zTree.init($("#ztree2"), setting2, zNodes2);
					});
				</script>

效果：  

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

	<!-- 展示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数据
						//jQuery提供 的ajax方法：ajax、post、get、load、getJSON、getScript
						var url = "${pageContext.request.contextPath}/json/menu.json";
						$.post(url,{},function(data){
							//调用API初始化ztree
							$.fn.zTree.init($("#ztree3"), setting3, data);
						},'json');
					});
				</script>

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

<!-- 展示ztree效果 :发送ajax请求获取简单json数据构造ztree-->
				<ul id="ztree3" class="ztree"></ul>
				<script type="text/javascript">
					$(function(){
						//页面加载完成后，执行这段代码----动态创建ztree
						var setting3 = {
								data: {
									simpleData: {
										enable: true//使用简单json数据构造ztree节点
									}
								},
								callback: {
									//为ztree节点绑定单击事件
									onClick: function(event, treeId, treeNode){
										if(treeNode.page != undefined){
											//判断选项卡是否已经存在
											var e = $("#mytabs").tabs("exists",treeNode.name);
											if(e){
												//已经存在，选中
												$("#mytabs").tabs("select",treeNode.name);
											}else{
												//动态添加一个选项卡
												$("#mytabs").tabs("add",{
													title:treeNode.name,
													closable:true,
													content:'<iframe frameborder="0" height="100%" width="100%" src="'+treeNode.page+'"></iframe>'
												});
											}
										}
									}
								}
						};
						
						//发送ajax请求，获取json数据
						//jQuery提供 的ajax方法：ajax、post、get、load、getJSON、getScript
						var url = "${pageContext.request.contextPath}/json/menu.json";
						$.post(url,{},function(data){
							//调用API初始化ztree
							$.fn.zTree.init($("#ztree3"), setting3, data);
						},'json');
					});
				</script>

myeclipse翻转引擎插件使用

数据库建模工具PowerDesigner使用方式