最近看了点zTree的知识只能算入门吧，自己也汇总了下不同的方式。下面提供zTree源代码和自己的小列子希望对大家都帮助。
1.Servlet代码
package com.servlet.servlet;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import com.servlet.bean.User;
import com.servlet.main.JSONMain;
import com.servlet.util.TreeView;
public class UserServlet extends HttpServlet {
/**
*
*/
private static final long serialVersionUID = 1L;
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
super.doGet(req, resp);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse respone)
throws ServletException, IOException {
List<User> list = new ArrayList<User>();
List<TreeView> treeList = new ArrayList<TreeView>();
User u1 = new User();
u1.setUserID(1);
u1.setPreID(0);
u1.setUrl("");
u1.setName("祥");
u1.setPassword("zl123456");
u1.setSex("男");
User u2 = new User();
u2.setUserID(2);
u2.setPreID(1);
u2.setUrl("login.jsp");
u2.setName("夏娟");
u2.setPassword("zl98765");
u2.setSex("女");
User u3 = new User();
u3.setUserID(3);
u3.setPreID(1);
u3.setUrl("login.jsp");
u3.setName("琳琳");
u3.setPassword("zl98765");
u3.setSex("女");
User u4 = new User();
u4.setUserID(3);
u4.setPreID(1);
u4.setUrl("login.jsp");
u4.setName("曼雪");
u4.setPassword("zl98765");
u4.setSex("女");
list.add(u1);
list.add(u2);
list.add(u3);
list.add(u4);
for(User u : list){
TreeView treeView = new TreeView();
treeView.setId(u.getUserID());
treeView.setName(u.getName());
treeView.setpId(u.getPreID());
treeView.setUrl(u.getUrl());
//treeView.setIsParent(true);
treeList.add(treeView);
}
//JSONObject jObject = JSONMain.getJsonFromList(treeList);
JSONArray jObject = JSONArray.fromObject(treeList);
System.out.println(jObject);
respone.setContentType("text/plain; charset=UTF-8");
respone.setCharacterEncoding("UTF-8");
respone.getWriter().write(jObject.toString());
//respone.encodeUrl("UTF-8");
//respone.getWriter().write("[{\"demoData\":\"This Is The JSON Data\"}]");
//respone.sendRedirect("index.jsp");
//request.getRequestDispatcher(request.getContextPath()+"/index.jsp").forward(request, respone);
}
@Override
/**
* 销毁
*/
public void destroy() {
super.destroy();
}
@Override
/**
* 初始化
*/
public void init() throws ServletException {
// TODO Auto-generated method stub
super.init();
}
}
2.TreeView工具类
package com.servlet.util;
import java.util.List;
public class TreeView {
private Integer id;
private Integer pId;
private String url;
private String name;
//private Boolean isParent;
private List<TreeView> nodes;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public Integer getpId() {
return pId;
}
public void setpId(Integer id) {
pId = id;
}
public String getUrl() {
return url;
}
public void setUrl(String url) {
this.url = url;
}
public List<TreeView> getNodes() {
return nodes;
}
public void setNodes(List<TreeView> nodes) {
this.nodes = nodes;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
/*public Boolean getIsParent() {
return isParent;
}
public void setIsParent(Boolean isParent) {
this.isParent = isParent;
}*/
}
3.发起请求页面获取
<%@ 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 XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<script src="<%=path%>/js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="<%=path%>/js/jquery.ztree.core-3.4.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="<%=path%>/css/zTreeStyle/zTreeStyle.css"></link>
<link rel="stylesheet" type="text/css" href="<%=path%>/css/demo.css"></link>
<script type="text/javascript" src="<%=path%>/js/jquery.ztree.excheck-3.4.js" ></script>
<script type="text/javascript">
function setFontCss(treeId, treeNode) {
return treeNode.level == 1 ? {color:"red"} : {};
};
var setting = {
check: {
enable: true//启动多选框记得导入jquery.ztree.excheck-3.4.js
},
data: {
simpleData: {
enable: true,//如果设置为 true，请务必设置 setting.data.simpleData 内的其他参数: idKey / pIdKey / rootPId，并且让数据满足父子关系。
idKey: "id",
pIdKey: "pId",
rootPId: 1
}
},
view: {
showLine: false,//显示连接线
showIcon: true,//显示节点图片
//fontCss: {color:"red"}
fontCss: setFontCss//节点颜色
},
async: { //ztree异步请求数据
enable: true,
url: "login",//请求action方法
autoparam:["id"]
}
};
$(function($){
/**
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
alert("treeObj : "+treeObj);
var nodes = treeObj.getSelectedNodes();
alert("nodes : "+nodes);
if (nodes.length>0) {
treeObj.reAsyncChildNodes(nodes[0], "refresh");
}
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
var nodes = treeObj.getNodes();
if (nodes.length>0) {
nodes[0].name = "test";
treeObj.updateNode(nodes[0]);
}
*/
alert(1);
$.fn.zTree.init($("#treeDemo"), setting);
});
</script>
</head>
<body>
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree">
</ul>
</div>
</body>
</html>
总结：上面列子只是简单的实例官网也有，不过zTree自从更新到3.4之后和之前的zTree版本有些不同在看文档时一定要看相应的版本文档不然纠结的很！zTree功能很强大可以深入学习哦！
分享到：
相关推荐
【标题】"ZTree+Struts2+ajax+json实现checkbox权限树"涉及的技术栈主要集中在前端的ZTree，后端的Struts2框架，以及数据交互中的Ajax和JSON。这个项目的核心目标是构建一个可复选的权限树形结构，用户通过勾选节点...
在SSH+ztree+ajax+json项目中，Ajax可能被用于异步地从服务器获取数据（例如JSON格式），然后动态地更新ZTree的节点，提供更流畅的用户体验。 JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于...
在这个项目中，Struts2负责接收用户的请求，调用相应的Action进行业务处理，并返回视图或者JSON数据给前端。 【Hibernate】是Java领域的一款持久化框架，它简化了数据库操作，通过ORM（对象关系映射）技术将Java...
4. **数据加载到Datatables**：Ajax请求成功后，接收到的JSON数据被Datatables解析并渲染到表格中，实现动态更新。 5. **事件绑定**：利用Datatables和ZTree的事件机制，可以实现更多交互功能，比如节点选择、数据...
1. **灵活性**：ZTree支持JSON数据格式，可以轻松地与后端服务器进行数据交互，实现动态加载和更新。 2. **可扩展性**：通过各种事件（如onClick、onDblClick等）和API，可以实现复杂的交互逻辑。 3. **多态性**：...
3. **创建ZTree的JSON数据**：在Action中，将数据库查询结果转换为ZTree需要的JSON格式。 4. **编写jQuery代码**：在前端页面中，使用jQuery初始化ZTree，并设置相应的配置项，如异步加载或全量加载。 5. **处理...
WebAPI可以使用C#的LINQ库高效地遍历文件系统，并返回JSON格式的结果，这些结果随后被ZTree解析并显示给用户。 数据库连接问题.txt可能包含了项目中遇到的数据库连接相关的调试信息或解决策略。在实际应用中，.NET ...
3. 配置 ZTree，指定数据源（JSON 格式），并定义节点点击、展开等事件的回调函数。 4. 在回调函数中处理表格的显示和隐藏，如通过 jQuery 动态添加或移除表格行。 5. 如果需要，可以利用 Bootstrap 的表格样式来...
在前端，我们使用ZTree的JavaScript库来解析JSON数据并渲染成树形结构。ZTree的初始化配置通常在HTML页面的JavaScript代码中完成。你需要在HTML中添加ZTree的CSS和JS文件，然后定义一个div元素作为ZTree的容器。 ``...
3. 数据配置：将数据以JSON格式写入JavaScript变量，然后通过调用ztree的初始化方法（如`$.fn.zTree.init($("#treeDemo"), setting, zNodes)`）将数据绑定到树。 4. 设置配置项（setting）：可以自定义ztree的行为...
在"Ztree+L文档生成下载实例"中，我们可能会看到如何将`Itext`生成的PDF文档集成到`ZTree`中，以便用户能够通过`ZTree`的界面生成并下载这些文档。 首先，`JsonTest`可能是一个用于处理JSON数据的示例。在实际应用...
ZTree的数据模型灵活，可以通过JSON数据进行配置，同时提供多种事件监听和回调函数，使得开发者可以根据业务需求定制功能。在ZTree中，树节点的加载可以通过异步方式，提高页面加载效率。 接下来，我们来谈谈折线图...
同时，你需要为每个节点提供ID、父ID、名称等属性，形成JSON数据结构，供Ztree解析。 2. **treeTable的实现**： treeTable是将表格和树形结构结合的组件，它在Ztree的基础上增加了表格的功能，可以展示更多列的...
这些数据通常是JSON格式，包含父节点ID、子节点ID、文本等信息，便于ZTree解析。 4. **异步加载数据**：当用户展开树形菜单的某个节点时，ZTree会自动触发异步请求，调用DWR中的后台方法获取子节点数据。后台处理...
它支持多种数据源格式，如JSON、XML，提供了丰富的配置选项和事件机制，使得在Web应用中展示层级关系数据变得简单。ztree还支持节点的增删改查、拖拽操作、多选功能，广泛应用于目录结构展示、文件管理、权限控制等...
5. **数据绑定**：支持JSON数据格式，可以方便地与后端数据进行对接。 ztree-select则在此基础上，加入了下拉菜单的特性： 1. **节省空间**：将复杂的树形结构收纳入一个下拉框内，只在需要时显示，有效节省了页面...
这个场景中提到的“Ztree后台拼接Json”主要指的是如何在服务器端（后台）处理并组合JSON数据，以便于ZTree前端组件能够正确渲染出树状结构。这个过程涉及到的数据处理和通信技术是关键知识点。 首先，我们需要了解...
标题"ztree最简单的树--标准JSON 数据"暗示我们将讨论如何用标准的JSON格式来构建ZTree的节点数据。 ZTree的核心在于其`setting`配置和`treeNode`节点数据。接下来，我们将详细解释这两个关键部分。 1. **setting ...
【ztree-json】是一个以JSON数据格式驱动的前端树形插件实例，它在IT行业中被广泛应用，特别是在构建用户界面，尤其是需要展示层级结构数据时。这个实例因其易用性和灵活性而受到赞誉，适合初学者和有经验的开发者...