zTree插件使用

最新推荐文章于 2024-07-16 10:23:26 发布

imxushuai

最新推荐文章于 2024-07-16 10:23:26 发布

阅读量232

点赞数

分类专栏：个人成长技术点文章标签： zTree easyUI

本文链接：https://blog.csdn.net/qq1031893936/article/details/79788041

版权

个人成长同时被 3 个专栏收录

88 篇文章 0 订阅

订阅专栏

技术点

36 篇文章 0 订阅

订阅专栏

zTree

1 篇文章 0 订阅

订阅专栏

zTree开发包：

查看api进行开发

构造zTree：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'layout.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/icon.css">
	<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script>
  	<script type="text/javascript" src="${pageContext.request.contextPath }/myjs/tabs.js"></script>
  	
  	<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>
  	
  	<script type="text/javascript">
		$(function(){
			//构造ztree相关设置  simpleData：表示使用简单json数据构造ztree
			var setting = {
				data: {
					simpleData: {
						enable: true
					}
				}
			};
			//构造ztree的节点，其中pid为父节点id，如pid不存在，则说明该节点没有父节点
			var nodes = [
			    {"id":1, "pId":0, "name":"1"},
			    {"id":2, "pId":0, "name":"2"},
			    {"id":3, "pId":0, "name":"3"},
			    {"id":11, "pId":1, "name":"1.1"}
			];
			//调用init方法初始化 ztree
			$.fn.zTree.init($("#ztree1"), setting, nodes);
		
//=========================================================================================================
	
			//构造ztree相关设置  simpleData：表示使用简单json数据构造ztree
			var setting2 = {
				data: {
					simpleData: {
						enable: true
					}
				},
				callback: {
					onClick: function(event, treeId, treeNode) {
					    //动态添加选项卡
					    if(treeNode.page){
					    	//判断'新增tabs'该选项卡是否存在，存在返回true，不存在返回false
							var flag = $("#tabs").tabs('exists',treeNode.name);
							//alert(flag);
							if(flag){//如果'新增tabs'已经存在那么就选中该选项卡
								$("#tabs").tabs('select',treeNode.name);
							}else{//否则就新增该选项卡
								$("#tabs").tabs('add',{
						          title: treeNode.name,
						          iconCls:'icon-edit',
						          closable:true,
						          content:'<iframe frameborder="0" width="100%" height="100%" src="http://www.baidu.com"></iframe>'
								});
							}
					    }
					    
						
					}
				}
	
			};
			
			//使用ajax动态加载json数据，用于构造ztree
			$.post('${pageContext.request.contextPath}/json/menu.json',{},function(data){
				//调用init方法初始化 ztree
				$.fn.zTree.init($("#ztree2"), setting2, data);
			},'json');
		});
				
	</script>
  </head>
  
  <body class="easyui-layout">
  	<!-- 使用div描述各个区域 -->
    <div title="XXXXXXXXXX" data-options="region:'north'" style="height: 100px">北部</div>
    <div title="功能列表" data-options="region:'west'" style="width: 220px">
	  	<!-- 
	  		定义折叠面板
	  		fit：true  面板自适应,即填充父容器
	  	 -->
		<div class="easyui-accordion" data-options="fit:true">
			<!-- 定义子DIV 表示每个面板 -->
			<div title="功能一">
				<br/>
				<a id="addTabs" class="easyui-linkbutton" data-options="iconCls:'icon-add'">add tabs</a>
			</div>
			<div title="功能二">
    <!-- ============================================================================== -->
				<!-- 构造ztree -->
				<ul id="ztree1" class="ztree"></ul>
	<!-- ============================================================================== --> 
	
			</div>
			<div title="功能三">
			
    <!-- ============================================================================== -->
				<!-- 使用ajax加载json数据 构造ztree -->
				<ul id="ztree2" class="ztree"></ul>
	<!-- ============================================================================== --> 
	
			</div>
		</div>

	</div>
    <div data-options="region:'center'">
    	<!-- 定义一个选项卡面板 -->
		<div id="tabs" class="easyui-tabs" data-options="fit:true">
			<!-- 定义子DIV 表示每个选项卡 -->
			<div title="首页">
			</div>
		</div>
	</div>
    <div data-options="region:'east'" style="width: 200px">东部</div>
    <div data-options="region:'south'" style="height: 50px">南部</div>
  </body>
</html>

json数据文件：

[
		{ "id":"11", "pId":"0", "name":"基础数据"},
		{ "id":"112", "pId":"11", "name":"取派员设置",  "page":"page_base_staff.action"},
		{ "id":"113", "pId":"11", "name":"区域设置","page":"page_base_region.action"},
		{ "id":"114", "pId":"11", "name":"管理分区", "page":"page_base_subarea.action"},
		{ "id":"115", "pId":"11", "name":"管理定区/调度排班","page":"page_base_decidedzone.action"},
		{ "id":"12", "pId":"0", "name":"受理"},
		{ "id":"121", "pId":"12", "name":"业务受理" ,"page":"page_qupai_noticebill_add.action"},
		{ "id":"122", "pId":"12", "name":"工作单快速录入" ,"page":"page_qupai_quickworkorder.action"},
		{ "id":"124", "pId":"12", "name":"工作单导入" ,"page":"page_qupai_workorderimport.action"},
		{ "id":"13", "pId":"0", "name":"调度"},
		{ "id":"131", "pId":"13", "name":"查台转单","page":"ads"},
		{ "id":"132", "pId":"13", "name":"人工调度","page":"page_qupai_diaodu.action"}
]