动态zTree显示目录与后台传递Json数据
2014-04-05 13:59
691 查看
从数据库动态加载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
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 《项目经验》--后台一般处理程序向前台JS文件传递JSON，JS解析JSON,将数据显示在界面--显示在DropDownList 或 显示在动态创建的table中
- 《项目经验》--后台一般处理程序向前台JS文件传递JSON，JS解析JSON,将数据显示在界面--显示在DropDownList 或 显示在动态创建的table中
- 给ajax留一个模板，通过后台传递json获取数据，并用table显示，方便以后使用
- jquery 传递数组到后台 及 获取后台JSON数据并显示
- FusionCharts动态获取后台json数据 页面显示
- 用户登陆验证---AJax在后台用json传递数据到前台显示
- jquery-ajax请求后台数据转换json显示在select下拉列表&&jquery获取下拉列表的值和显示内容的方法
- 使用js实现将后台传入的json数据放在前台显示
- 后台返回json数据，前台显示代码
- 在jquery mobile制作app的几个页利用ajax将后台数据json数组动态加载到列表里面
- jquery-ajax请求后台数据转换json显示在select下拉列表
- 微信小程序如何与java后台交互，获取json数据显示到页面，求大神指点
- Jquery datatable jsonp 显示后台json数据
- js获取后台json数据显示在jsp页面元素
- 根据后台数据 动态显示前台编辑按钮内容
- dataTables动态获取后台json数据分页展示
- 传递给后台的Json数据解析
- jsp页面对后台数据动态搜索显示
- Jquery下Json数据的传递与解析(asp.net mvc与asp.net api下后台json接收方式的不同)
- springboot开发中使用postman 向后台传递json数据的时候，为空