SSM ztree前端jsp内容，以及一些简单的讲解

ztree API 网址： http://www.treejs.cn/v3/api.php

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。
zTree 是开源免费的软件（MIT 许可证）。如果您对 zTree 感兴趣或者愿意资助 zTree 继续发展下去，可以进行捐助。
zTree v3.0 将核心代码按照功能进行了分割，不需要的代码可以不用加载
采用了延迟加载技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀
兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器
支持 JSON 数据
支持静态和 Ajax 异步加载节点数据
支持任意更换皮肤 / 自定义图标（依靠css）
支持极其灵活的 checkbox 或 radio 选择功能
提供多种事件响应回调
灵活的编辑（增/删/改/查）功能，可随意拖拽节点，还可以多节点拖拽哟
在一个页面内可同时生成多个 Tree 实例
简单的参数配置实现灵活多变的功能

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

main.jsp主要是登陆后，首先进入main.jsp中，然后由main.jsp跳转到其他页面，进行页面显示模块分化作用。

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

right.jsp主要是在右侧显示一些图片，例如欢迎光临之类图片，是效果更加好看

left.jsp具体内容

<%@ 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 'index.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.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,
			showLine:false,
			showTitle:false
		},
		data: {
			simpleData: {
				enable: true,
				idKey: "id",
				pIdKey: "pid",
				rootPId: 0
			}
		}
	},
	zTreeNodes;
	$(document).ready(function(){
		$.ajax({
			   async: false,
			   type: "POST",
			   url: "selectquanxian",
			   success: function(msg){
				   zTreeNodes = msg;
			   },
			   dataType: "json"
			});
		zTreeObj = $.fn.zTree.init($("#tree"), setting, zTreeNodes);

	});
	</script>
  </head>
  
  <body>
    <ul id="tree" class="ztree" style="width:230px; overflow:auto;"></ul>
  </body>
</html>

left.jsp主要是显示分级，换一种说法来说这个jsp显示的就是ztree里面的树，而里面的ajax：url是跳转到后台的权限查询方法，而查询的sql语句需要根据具体的业务操作进行拼写，再次就不跟大家具体言明了。

top.jsp具体内容

<%@ 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.jsp";
  	}
  </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;">欢迎${UserLogin.rname}登陆</h3>
  		</div>
  </body>
</html>

top.jsp主要是为了大家能更好的作出页面效果，上面会显示一些用户的登录信息，以及你要做的项目的名称是啥，这些都可以在这里面写。

再次谢谢大家观看小编的一些总结，这只是我的一些见解。

SSM ztree前端jsp内容，以及一些简单的讲解

猜你喜欢