ztree项目

article/2025/9/14 20:38:40

思路：

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

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

在这里插入图片描述

这个是树的一个表

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>