ztree模板

最新推荐文章于 2025-06-28 12:51:07 发布

原创最新推荐文章于 2025-06-28 12:51:07 发布 · 486 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ztree

ztree 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了Ztree的各个部分，包括main头目、top模板、right模板和left模板的使用，阐述了如何在实际项目中有效整合这些模板，以实现强大的树形数据展示和操作功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>
<frameset rows="12%,*" >
	<frame noresize="noresize" src="top">
	<frameset cols="20%,*">
		<frame src="left">
		<frame src="right" name="right">
	</frameset>
</frameset>
</html>

top的模板

<%@ 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 'top.jsp' s tarting 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">
	-->

  </head>
  <script type="text/javascript">
  	function logout(){
  		window.parent.location.href="login";
  	}
  </script>
  <body style="background-image:url('zTree/css/zTreeStyle/img/top.png');width: 1300px;">
  		<div>
	       <input type="button" value="注销" onclick="logout()" style="border:none;background:transparent; color:white;float: right;margin-top: 40;margin-left: 230" />
	  		<h3 style="color: white;float: right;margin-top: 20;">欢迎${rw.rname}登陆</h3>
  		</div>
  </body>
</html>

right的模板

<%@ 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>
	<img src="zTree/css/zTreeStyle/img/right.png"></img>
</body>
</html>

left的模板

<%@ 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 'left.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">
	-->
  <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
  <script type="text/javascript" src="zTree/js/jquery.ztree.core.js"></script>
  <script type="text/javascript" src="zTree/js/jquery.ztree.exedit.js"></script>
  <script type="text/javascript" src="zTree/js/jquery.ztree.excheck.js"></script>
  <link rel="stylesheet" href="zTree/css/zTreeStyle/zTreeStyle.css" type="text/css"></link>
    <script type="text/javascript">
	    var zTreeObj,
		setting = {
			view: {
				selectedMulti: false,
				
			},
			data: {
				simpleData: {
					enable: true,
					idKey: "id",
					pIdKey: "pid",
					rootPId: 0
				 }
	        }
		},
		
		
		zTreeNodes ;
	
		$(document).ready(function(){
		    $.ajax({
			   "type": "post",
			   "url": "<%=path %>/quanxian",
			   "success": function(obj){
			    zTreeNodes=obj;
			   },
			   "dataType":"json",
			   "async":false
			});
		    
			zTreeObj = $.fn.zTree.init($("#tree"), setting, zTreeNodes);
	
		});
    
    </script>
  </head>
  
  <body>
    <div id="tree" class="ztree"></div>
  </body>
</html>