版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/dawn_after_dark/article/details/69955162
z-Tree jsp 页面如下
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="path" value="${pageContext.request.contextPath}"/>
<!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">
<script type="text/javascript" src="${path}/jq/jquery-3.2.0.min.js"></script>
<script type="text/javascript" src="${path }/Z-Tree/jquery.ztree.core.js"></script>
<script type="text/javascript" src="${path }/Z-Tree/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="${path }/Z-Tree/jquery.ztree.exedit.js"></script>
<link rel="stylesheet" href="${path}/css/zTreeStyle/zTreeStyle.css" type="text/css"/>
<title>Insert title here</title>
</head>
<script>
var zTree;
var selectNode;
var load = false;
$(function(){
zTree = $.fn.zTree.init($("#treeDemo"), setting);
})
var setting = {
async : {
enable : true,
dataType : "text",
type : "post",
url : "${path}/CityNodeServlet?timestamp="+ new Date().getTime(), //请求节点生成的servlet
autoParam : [ "id" ] //每次异步加载传给服务器的参数
},
view : {
dblClickExpand : true,
selectedMulti:false,
},
edit: {
enable: true, //编辑节点必须设置该字段，并且编辑状态包括修改和删除，所以如果设置true
editNameSelectAll : true, //删除按钮和修改按钮都会出现，添加按钮需要自己额外添加
showRenameBtn : false, //如果只要删除功能，所以修改按钮设置为false,默认值为true
showRemoveBtn: showRemoveBtn, //选做，可以删除这一行
//高级用法就是为showRemoveBtn 设置函数，函数体内判断节点来为某一些节点禁用删除按钮,比如这里禁止删除跟节点。
},
data : {
key : {
name : "nodeName" // 取后台传过来的json数据中 nodeName 字段值作为节点名称
},
simpleData : {
enable : true,
idKey : "id", //节点的id,注意此处要对应你后台传过来的节点的属性名id
pIdKey : "pId", //节点的pId,注意此处要对应你后台传过来的节点的属性名pId
rootPId : 0 //根节点的pId = 0
}
},
callback : {
beforeRemove : beforeRemove, //删除前的回调函数
onAsyncSuccess: zTreeOnAsyncSuccess //异步加载完毕的回调函数
}
};
function showRemoveBtn(treeId,treeNode){
return !treeNode.level==0; //跟节点返回false,所以跟节点不显示删除按钮。
}
function beforeRemove(treeId, treeNode){
if(treeNode.pId==0){ //如果删除的是根节点，也提示无法删除
alert("根节点无法删除！")
return false; //返回false 就会使前端的节点还保持存在，
// 如果是true,则会在前端界面删除，但数据库中还会有，刷新一下即可再次出现
}
if(confirm("是否删除？")){ // 询问是否删除，若删除，则利用Ajax 技术异步删除，同是返回json格式数据，告知前台是否删除成功！
$.post('${path}/DeleteCityServlet?ids='+treeNode.id,function(data){ // 从数据库中删除
if(data.success){ // data 为 json 格式数据
zTree.removeNode(treeNode); // z-Tree 的api ，从视角上 删除
alert(data.msg); // 要在后台删除成功后再进行视角上删除，这样就真正意义实现了删除。
}else{
alert(data.msg);
return false;
}
});
}
return ;
}
function zTreeOnAsyncSuccess(event, treeId, treeNode, msg){ // 这个函数仅仅是为了 初始化时展开 1级菜单
if(!load){
var nodes = zTree.getNodesByParam("pId", 0, null);
$.each( nodes, function(i, n){
zTree.expandNode(n, true, false, true);
});
load = true;
}
}
</script>
<style type="text/css">
.title{
margin: 30px 30px;
font-size:15px;
}
#tree{
margin: 30px 30px;
}
</style>
<body>
<div class="title">jsp/servelt 目录树的添加、删除和修改（请不要删除根节点）</div>
<div id="tree">
<ul id="treeDemo" class="ztree"></ul>
</div>
</body>
</html>注意： setting 部分冒号前面的字段请不要更改，必须与官网一致！！！！切记！这就好比编程语言中的关键字！
1.以上运用了jsp 标签获取上下文路径，为了资源的相对路径而设。
2.注意js 文件 和 css 文件的 引入
3. 注意 setting 的参数设置，详情请去官网查看。
CityDAO代码：
package util;
import java.util.List;
public interface CityDAO {
public List findTypeChildrenById(Integer id);// 查询孩子节点
public void deleteCity(Integer id); //删除节点
}CityImpl代码：
package util;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;
public class CityImpl implements CityDAO{
@Override
public List findTypeChildrenById(Integer id) {
java.sql.Connection conn = null;
java.sql.PreparedStatement ps = null;
ResultSet rs = null;
List<City> list =new ArrayList<City>();
try{
conn = DbUtil.getConnection();
String sql = "select * from essayType where parent_id = ?";
ps = conn.prepareStatement(sql);
ps.setInt(1, id);
rs = ps.executeQuery();
while(rs.next())
{
City e = new City();
e.setId(rs.getInt("id"));
e.setpId(rs.getInt("parent_id"));
e.setCity(rs.getString("province"));
list.add(e);
}
}catch(Exception e){
e.printStackTrace();
}finally{
DbUtil.closeAll(conn, ps, rs);
}
return list;
}
@Override
public void deleteCity(Integer id) {
Connection conn = null;
PreparedStatement ps = null;
try{
conn = DbUtil.getConnection();
String sql = "delete from essaytype where id = ?";
ps = conn.prepareStatement(sql);
ps.setInt(1, id);
ps.execute();
}catch(Exception e){
e.printStackTrace();
}finally{
DbUtil.closeAll(conn, ps);
}
}
}CityImpl的 findTypeChildrenById（id） 是为了查询孩子节点并返回list
CityNodeServlet 返回 json格式的一组节点，如下：
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
Integer id = request.getParameter("id")==null? 0 : Integer.parseInt(request.getParameter("id"));
List<City> e = c.findTypeChildrenById(id);
JSONArray jsonArray = new JSONArray();
for(City temp : e){
TreeNode treeNode = new TreeNode();
JSONObject jO = new JSONObject();
treeNode.setId(temp.getId());
jO.put("id", treeNode.getId());
treeNode.setpId(temp.getpId());
jO.put("pId", treeNode.getpId());
treeNode.setNodeName(temp.getCity());
jO.put("nodeName", treeNode.getNodeName());
jO.put("open", treeNode.getOpen()); // 默认不展开
jO.put("checked", false);
List<City> cities = c.findTypeChildrenById(temp.getId());
if(cities.size() ==0)
treeNode.setIsParent(false);
jO.put("isParent", treeNode.getIsParent());
jsonArray.add(jO);
}
response.setContentType("application/json;charset=utf-8");
response.getWriter().println(jsonArray.toString());
}其中treeNode 的定义见前期准备篇
必须返回节点的isParent属性，判断是否为双亲节点，因为这个属性影响前段的样式显示，可以自行尝试。
基本就这样，你可以结合前期准备试一下，如果哪里不会或者遇到什么错误，可以留言告知。