zTree 数据库加载

最新推荐文章于 2024-08-21 16:19:19 发布

mw920516

最新推荐文章于 2024-08-21 16:19:19 发布

阅读量1.1k

点赞数

从数据库动态加载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">



<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');