ztree项目

最新推荐文章于 2020-11-03 10:24:53 发布

浪丫头

最新推荐文章于 2020-11-03 10:24:53 发布

阅读量354

点赞数

分类专栏：项目文章标签： ztree

本文链接：https://blog.csdn.net/fenghuanxia66/article/details/84334860

版权

项目专栏收录该内容

7 篇文章 0 订阅

订阅专栏

该博客介绍如何利用ZTree实现一个登录系统，登录后展示树形结构，每个节点对应不同内容。核心在于创建包含id、name、pid和url的表格来定义树结构。后台根据登录信息跳转到相应页面，前台展示数据并提供退出功能。主要涉及到的页面有main.jsp和tree.jsp。

摘要由CSDN通过智能技术生成

思路：

创建一个登陆登陆上去就是树每个是的根节点有他所要展示的内容

表可以有无数个主要说的是创建树的表

在这里插入图片描述

这个是树的一个表

id 是节点 name 名字 pid 根节点 url 路径

在这里插入图片描述

树的页面

在这里插入图片描述
后台通过登陆转的页面

在这里插入图片描述

转页面在前台打印出你想要的数据

前台页面

在这里插入图片描述

退出

	/**
	 * 退出
	 */
	@RequestMapping("exit")
	public void exit(HttpSession session) {
		session.invalidate();
	}

function exit(){
	parent.location="login.jsp";
}

/**
	 * 转页面
	 */
	@RequestMapping("/page")
	public String page(String page) {
		return page;
	}

/**
	 * ztree
	 */
	@ResponseBody
	@RequestMapping("ztree")
	public List<Ztree> ztree(){
		System.out.println(zm.ztree());
		return zm.ztree();
	}

前台

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<frameset rows="10%,*">
<frame src="page?page=head" noresize="noresize">
<frameset cols="15%,*">
<frame src="page?page=tree" noresize="noresize">
<frame src="page?page=content" noresize="noresize" name="content">
</frameset>
</frameset>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- 引入ztree库文件 -->
<link rel="stylesheet" href="/js/zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="<%=request.getContextPath() %>/js/zTree_v3/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/zTree_v3/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/zTree_v3/js/jquery.ztree.excheck.js"></script>
<script type="text/javascript">
var setting ={
		data:{
			simpleData:{
				enable:true,
				idKey:"id",//菜单的编号
				pIdKey:"pid",//上级节点的编号
				rootPid:null
			}
		},
		callback:{//回调函数//设置点击事件：//event事件属性//treeId id属性//treeNode(name,url)，节点对象
			onClick:function(event, treeId, treeNode) {
				//alert(treeNode.isParent);//是否是树干()
		 	if (treeNode.isParent !=true) {//判断是否末级节点
					//获取中央内容区
					var content = parent.frames["content"];
					content.location = treeNode.url;
				}else{
					var zTree = $.fn.zTree.getZTreeObj("treeDemo");//获取树对象,ul中的id属性
		            zTree.expandNode(treeNode);//展开或者折叠
				} 
			}
		}
};
$(function(){
	$.post("<%=request.getContextPath() %>/ztree",{},function(data){
		//ztree初始化
		$.fn.zTree.init($("#treeDemo"), setting, data);
	},"json");
	
	
})
</script>

</head>
<body>
<ul id="treeDemo" class="ztree"></ul>
</body>
</html>

方法page 可以不用写直接跳页面

另一种树

main.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

</head>
<body>
<jsp:include page="head.jsp"></jsp:include>
<table>
<tr>
<td width="200px" valign="top">
<jsp:include page="tree.jsp"></jsp:include>
</td>
<td>
<iframe src="" name="right" width="800px" height="500px;" frameborder="0"></iframe>
</td>
</tr>
</table>
</body>
</html>

tree.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

</head>
<body>
<jsp:include page="head.jsp"></jsp:include>
<table>
<tr>
<td width="200px" valign="top">
<jsp:include page="tree.jsp"></jsp:include>
</td>
<td>
<iframe src="" name="right" width="800px" height="500px;" frameborder="0"></iframe>
</td>
</tr>
</table>
</body>
</html>