從數據庫動態加載zTree目錄
大家好，經過一些痛苦的學習與試驗，小編總結了動態加載zTree的方法，大部分是要從網上拷貝的。這個也是我從網上拷貝的，也有很多地方不知道什么意思。但是程序員就要會復制粘貼嘛，可能有很多地方需要改進，大神勿噴！下面我把我的理解帶給大家：
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 'success.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">
<!-- 下面是css和各種js的引用（注意：不要將css和js源文件放入WEB-INF中 -->
<!-- 否則會無法識別,很蛋疼的東西啊）-->
<link rel="stylesheet" href="pages/css/demo.css" type="text/css">
<link rel="stylesheet" href="pages/css/zTreeStyle/zTreeStyle.css"
type="text/css">
<script type="text/javascript" src="pages/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="pages/js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="pages/js/jquery.ztree.exhide-3.5.js"></script>
<SCRIPT type="text/javascript">
//下面開始進入復制階段
var setting = {
data : {
key : {
title : "title"
},
simpleData : {
enable : true
}
}
};
function setTitle(node) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
var nodes = node ? [ node ] : zTree.transformToArray(zTree.getNodes());
for ( var i = 0, l = nodes.length; i < l; i++) {
var n = nodes[i];
n.title = "[" + n.id + "] isFirstNode = " + n.isFirstNode
+ ", isLastNode = " + n.isLastNode;
zTree.updateNode(n);
}
}
function count() {
var zTree = $.fn.zTree.getZTreeObj("treeDemo"), hiddenCount = zTree
.getNodesByParam("isHidden", true).length;
$("#hiddenCount").text(hiddenCount);
}
function showNodes() {
var zTree = $.fn.zTree.getZTreeObj("treeDemo"), nodes = zTree
.getNodesByParam("isHidden", true);
zTree.showNodes(nodes);
setTitle();
count();
}
function hideNodes() {
var zTree = $.fn.zTree.getZTreeObj("treeDemo"), nodes = zTree
.getSelectedNodes();
if (nodes.length == 0) {
alert("請至少選擇一個節點");
return;
}
zTree.hideNodes(nodes);
setTitle();
count();
}
//以上可以直接復制，有興趣的可以參考zTree文檔進行研究
//從后台讀取數據用來保存結點的數組
var treeNodes = [];
//一切准備好后初始化樹
$(document).ready(function() {
//初始化zNodes數組——treeNodes
$(function() {
//從后台獲取json串的連接
var url = "http://localhost:8080/InspurUser/JsonRightServlet";
//right是從session獲取並保存在jsp頁面body中的一個hidden標簽中
var right = document.getElementById("right").value;
$.ajax({
url : url,
type : 'post',
//這個是傳到后台的數據，后台就是根據它獲取zTree結點信息的，它是一個json格式的串
data : {right : right},
async : false,
success : function(data) {
//這個data是ajax傳回的數據一個json串
/*
json串={"right":[{"id":"1","isHidden":0,"name":"公司","open":1,"pId":"0","target":"","title":"","url":""},
{"id":"11","isHidden":0,"name":"超級管理員","open":0,"pId":"1","target":"mainF","title":"","url":""},
{"id":"111","isHidden":0,"name":"顯示報表","open":0,"pId":"11","target":"mainF","title":"","url":"http://localhost:8080/InspurUser/chart/index.jsp"},
{"id":"112","isHidden":0,"name":"管理用戶","open":0,"pId":"11","target":"mainF","title":"","url":"http://localhost:8080/InspurUser/DirectTo?method=toUserManager"}]}
*/
var msg = eval('(' + data + ')');
//非常強大的遍歷函數
$.each(msg, function(i, item) {
//此處i=right
//item是json串的后半部分
$.each(item,function(ii,iit){//遍歷json數據（對我們有用的——樹的節點的所有信息）
treeNodes.push({"id":iit.id,"name":iit.name,"pId":iit.pId,"url":iit.url,"target":iit.target});
});
});
}
});
});
//一下是初始化zTree的函數，可以直接復制，
//但$("#treeDemo")中的treeDemo是要存放zTree的div的id
$.fn.zTree.init($("#treeDemo"), setting, treeNodes);
$("#hideNodesBtn").bind("click", {
type : "rename"
}, hideNodes);
$("#showNodesBtn").bind("click", {
type : "icon"
}, showNodes);
setTitle();
count();
});
</script>
</head>
<body background="img/back.jpg">
<div>
<table width="100%" height="100%">
<tr height="10%">
<td colspan="2"><marquee direction="right">
<font color="#00FFFF" size="30px">浪潮內訓圖表</font>
</marquee></td>
</tr>
<tr>
<td rowspan="2" width="20%">
<%--
這就是要擺放zTree的地方
--%>
<div>
<ul id="treeDemo" class="ztree"></ul>
</div>
<%--
這就是存放權限right的hidden標簽，在穿到后面的時候用到
--%>
<input type="hidden" name="right" id="right"
value="${sessionScope.user.right }"></td>
<td width="1000px" height="530px"
style="padding: 0px;text-align: center;"><iframe src=""
width="100%" height="100%" frameborder="0" name="mainF"
scrolling="auto" style="margin: 0px;"></iframe></td>
</tr>
</table>
</div>
</body>
</html>
獲取Json數據的Servlet代碼：
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
String right = request.getParameter("right");
System.out.println(right);
RightDao dao = new RightDao();
//獲取所有right
List<RightNodes> list = dao.getRightsMess(right);
System.out.println("right list個數="+list.size());
try{
//此處要引入Json的包（還要放入到tomcat下的lib中）
// http://pan.baidu.com/s/1dDDuSQd
JSONArray json =JSONArray.fromObject(list);
JSONObject jb =new JSONObject();
jb.put("right", json);
System.out.println("json串="+jb.toString());
out.print(jb.toString());
out.flush();
out.close();
}catch(Exception e){
e.printStackTrace();
}finally{
out.close();
}
}
有了上面的就夠了嗎？
不，還要有對應的數據庫設計：大家可以參照zTree節點的各個參數來設計數據庫。以便進行更進一步的操作，如跳轉鏈接等。
一下便是我的數據庫設計：
create table rightnodes(
id varchar2(5) not null,
pid varchar2(5) not null,
name varchar2(20) not null,
url varchar2(200),
open number(1),
ishidden number(1),
title varchar2(50),
target varchar2(30)
);
--插入數據
insert into rightnodes values(1,0,'公司','',1,0,'','');
insert into rightnodes values(11,1,'超級管理員','',0,0,'','mainF');
insert into rightnodes values(111,11,'顯示報表','http://localhost:8080/InspurUser/chart/index.jsp',0,0,'','mainF');
insert into rightnodes values(112,11,'管理用戶','http://localhost:8080/InspurUser/DirectTo?method=toUserManager',0,0,'','mainF');
insert into rightnodes values(12,1,'普通用戶','',0,0,'','mainF');
insert into rightnodes values(121,12,'跳轉到Google','http://www.google.com',0,0,'','mainF');
insert into rightnodes values(122,12,'葉子結點2','',0,0,'','mainF');
備注：如有疑問，歡迎追問。qq：1149500475