ztree 增删修改---增加节点

最新推荐文章于 2025-07-07 15:58:46 发布

Yang Special

最新推荐文章于 2025-07-07 15:58:46 发布

阅读量5k

点赞数 4

CC 4.0 BY-SA版权

文章标签： ztree

本文链接：https://blog.youkuaiyun.com/dawn_after_dark/article/details/70584995

本文详细介绍了ZTree中如何实现节点的添加，关键在于addhover函数和添加节点的后台处理代码，提供了CityImpl及AddCityServlet的示例，并展示了效果。此系列教程基本满足常见需求，拖拽功能可按需留言补充。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

暂为最后一篇，节点的添加有点难，因为需要自己自行添加。

实现

addhover 函数请仔细看看，具体代码如下：

<%@ 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>
<style type="text/css">
.title{
 	 margin: 30px 30px;
  font-size:15px;
}
#tree{
 margin: 30px 30px;
}
.ztree li span.button.add {
margin-left:2px; 
margin-right: -1px; 
background-position:-144px 0;
 vertical-align:top; 
 *vertical-align:middle
 }
</style>
</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,
				addHoverDom: addHoverDom,        //添加按钮
				removeHoverDom: removeHoverDom