个人ztree开发的一些步骤

最新推荐文章于 2021-03-15 18:12:22 发布

xujiamingTA

最新推荐文章于 2021-03-15 18:12:22 发布

阅读量226

点赞数 2

分类专栏： ztree 文章标签：针对ztree的步骤

本文链接：https://blog.csdn.net/weixin_44319052/article/details/86560450

版权

ztree 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  </head>
  
  <frameset rows="15%,*,5%"  border="1" bordercolor="red">
  <frame src="top" >
  <frameset cols="20%,*" border="1" bordercolor="#6495ED">
  		<frame src="left">
  		<frame src="right" name="right">
  </frameset>
  <frame>
  </frameset>
 </html>

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

right.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 'right.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">
	-->

  </head>
  
  <body>
    <center>
    	<font color=" 	
#FFE4E1"><h1>Action  is a beat!</h1></font>
    </center>
  </body>
</html>

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

left.jsp具体内容

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
request.setAttribute("ctx", request.getContextPath());
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
    <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">
	-->
<link rel="stylesheet" href="${ctx}/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script src="${ctx}/js/jquery-1.9.1.min.js"></script>
<script src="${ctx}/js/jquery.ztree.core.js"></script>
<script type="text/javascript"> 
	$(function(){
		//规则
		var setting={
			data:{
				key:{
					name:"qname",
					url:"qurl"
				},
				simpleData:{
					enable:true,
					idKey: "id",
					pIdKey: "pid"	
				}
			},
			callback:{
				onClick:onClick
			}
		}
		$.ajax({
			url:"${ctx}/quanxian",
			type:"post",
			dataType:"json",
			success:function(mlist){
				//组织架构树 结构的固定写法
				$.fn.zTree.init($("ul"),setting,mlist);
			//	aa=mlist;
			},
			error:function(){
				alert("ajax请求过程中发生了无可预测的异常\n请检查您传递的参数或者返回的内容是否符合dataType中的描述");
			}
			
		});
		//aa = $.fn.zTree.init($("#tree"), setting, aa);
	});
	function onClick(){
		parent.right.location.href;
	}
</script>
  </head>
  
  <body>
  <ul class="zTree" ></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' 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">
	-->

  </head>
  
  <body background="">
  您好！${user.user_name }
  </body>
</html>

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

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