声明：此博文是根据网上一位大神的文章写的，和这位大神的著作大同小意，非常感谢这位大神。
1、zTree介绍：
zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。专门适合项目开发，尤其是 树状菜单、树状数据的Web显示、权限管理等等。
zTree 是开源免费的软件（MIT 许可证）。在开源的作用下，zTree 越来越完善，目前已经拥有了不少粉丝，并且今后还会推出更多的 zTree 扩展功能库，让 zTree 更加强大。
2、zTree特点：
zTree v3.0 将核心代码按照功能进行了分割，不需要的代码可以不用加载采用了 延迟加载 技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀
兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器
支持 JSON 数据
支持静态 和 Ajax 异步加载节点数据
支持任意更换皮肤 / 自定义图标（依靠css）
支持极其灵活的 checkbox 或 radio 选择功能
提供多种事件响应回调
灵活的编辑（增/删/改/查）功能，可随意拖拽节点，还可以多节点拖拽哟
在一个页面内可同时生成多个 Tree 实例
简单的参数配置实现 灵活多变的功能
3、zTree优化:
zTree 的作者利用业余时间不断改进 zTree 功能，并且还能及时与用户沟通，及时回复各种疑问，便于新用户快速掌握。目前越来越多的用户都使用 zTree 替换了系统中原有的 树插件，这其中包括最近刚发布最新版本的 QUI 框架。
大家也可以从官网http://www.ztree.me/v3/main.php#_zTreeInfo看一些列子、下包！本处以提供（JQuery zTree v3.3.zip）；
4、zTree整体解析:
首先把JQuery zTree v3.3.zip解压放到web目录下（可以根据业务需求自定义），然后看一下代码应用的整体结构：
以自己的demo为例：
4.1:引入zTree相关的js、css文件
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="zTree/css/demo.css" type="text/css">
<link rel="stylesheet" href="zTree/css/zTreeStyle/zTreeStyle.css"
type="text/css">
<script type="text/javascript" src="zTree/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="zTree/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="zTree/js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="zTree/js/jquery.ztree.exedit.js"></script>4.2：zTree异步加载的一些配置，业务需求不同篇日志也不同，看图分析：
5、自己写的一个小demo，连接数据库实现了增删改
数据库创建：
JsonDataServlet.java
package com.xbmu.demo;
import java.io.IOException;
import java.net.URLDecoder;
import java.sql.SQLException;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanListHandler;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;
import com.xbmu.bean.Car;
import com.xbmu.utils.DBCPUtil;
@WebServlet(urlPatterns="/jsondata")
public class JsonDataServlet extends HttpServlet {
QueryRunner qr = new QueryRunner(DBCPUtil.getDataSource());
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
String method = req.getParameter("method");
if("deletePp".equals(method)){
deletePp(req,resp);
}else if("addPp".equals(method)){
addPp(req,resp);
}else if("updatePp".equals(method)){
updatePp(req,resp);
}
resp.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
String data = getData();
resp.getWriter().write(data);
}
//更新节点
private void updatePp(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException{
req.setCharacterEncoding("utf-8");
String id = req.getParameter("id");
id = URLDecoder.decode(id,"utf-8");
String name = req.getParameter("name");
name = URLDecoder.decode(name,"utf-8");
try {
String sql = "update car set name=? where id=?";
int update = qr.update(sql, name,id);
if(update==1){
System.out.println("修改成功");
}else{
System.out.println("修改失败");
}
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
//增加节点
private void addPp(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
String pId = req.getParameter("pId");
pId = URLDecoder.decode(pId,"utf-8");
String name = req.getParameter("name");
name = URLDecoder.decode(name,"utf-8");
try {
String sql = "insert into car(pId,name) values(?,?)";
int update = qr.update(sql, pId,name);
if(update==1){
System.out.println("添加成功");
}else{
System.out.println("添加失败");
}
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
//删除节点
private void deletePp(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
String id = req.getParameter("id");
id = URLDecoder.decode(id,"utf-8");
String sql = "delete from car where id=?";
try {
int update = qr.update(sql, id);
if(update==1){
System.out.println("删除成功");
}else{
System.out.println("删除失败");
}
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
doPost(req, resp);
}
public String getData(){
String sql = "select * from car";
JSONArray array = new JSONArray();
try {
List<Car> carList = qr.query(sql, new BeanListHandler<Car>(Car.class));
for (Car car : carList) {
JSONObject jsonObject = new JSONObject();
jsonObject.put("id",car.getId());
jsonObject.put("name",car.getName());
jsonObject.put("pId",car.getpId());
array.put(jsonObject);
}
System.out.println(array.toString());
} catch (SQLException e) {
e.printStackTrace();
} catch (JSONException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return array.toString();
}
}
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="zTree/css/demo.css" type="text/css">
<link rel="stylesheet" href="zTree/css/zTreeStyle/zTreeStyle.css"
type="text/css">
<script type="text/javascript" src="zTree/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="zTree/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="zTree/js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="zTree/js/jquery.ztree.exedit.js"></script>
<script type="text/javascript">
var setting = {
async : {
enable : true,//开启异步加载处理
url : encodeURI(encodeURI("/peTreeDemo2/jsondata")),
autoParam : [ "id" ],
dataFilter : filter,
contentType : "application/json",
type : "get"
},
view : {
expandSpeed : "",
addHoverDom : addHoverDom,
removeHoverDom : removeHoverDom,
selectedMulti : false
},
edit : {
enable : true
},
data : {
simpleData : {
enable : true
}
},
callback : {
beforeRemove : beforeRemove,
beforeRename : beforeRename,
}
};
function filter(treeId, parentNode, childNodes) {
if (!childNodes)
return null;
for (var i = 0, l = childNodes.length; i < l; i++) {
childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
}
return childNodes;
}
function beforeRemove(treeId, treeNode) {
if (confirm("确认删除节点--" + treeNode.name + "--吗?")) {
var param = "id=" + treeNode.id;
$.post(encodeURI(encodeURI("/peTreeDemo2/jsondata?method=deletePp&"
+ param)));
} else {
return false;
}
}
function beforeRename(treeId, treeNode, newName) {
if (newName.length == 0) {
alert("节点名称不能为空.");
return false;
}
var param = "id=" + treeNode.id + "&name=" + newName;
$.post(encodeURI(encodeURI("/peTreeDemo2/jsondata?method=updatePp&"
+ param)));
return true;
}
function addHoverDom(treeId, treeNode) {
var sObj = $("#" + treeNode.tId + "_span");
if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0)
return;
var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
+ "' title='add node' οnfοcus='this.blur();'></span>";
sObj.after(addStr);
var btn = $("#addBtn_" + treeNode.tId);
if (btn)
btn.bind("click", function() {
var Ppname = prompt("请输入新节点名称");
if (Ppname == null) {
return;
} else if (Ppname == "") {
alert("节点名称不能为空");
} else {
var param ="&pId="+ treeNode.id + "&name=" + Ppname;
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
$.post(
encodeURI(encodeURI("/peTreeDemo2/jsondata?method=addPp&"
+ param)), function(data) {
if ($.trim(data) != null) {
var treenode = $.trim(data);
zTree.addNodes(treeNode, {
pId : treeNode.id,
name : Ppname
}, true);
}
})
}
});
};
function removeHoverDom(treeId, treeNode) {
$("#addBtn_" + treeNode.tId).unbind().remove();
};
$(document).ready(function() {
$.fn.zTree.init($("#treeDemo"), setting);
});
</script>
<style type="text/css">
.ztree li span.button.add {
margin-left: 2px;
margin-right: -1px;
background-position: -144px 0;
vertical-align: top;
*vertical-align: middle
}
</style>
</head>
<body>
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
</div>
</body>
</html>
自己的写的一个小demo和网上一位大神做的笔记的下载地址：http://download.csdn.net/detail/btt2013/9479377
扫一扫
312
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
