最終效果如下：
當鼠標移動到節點時，後面會出現三個小圖標，依次代表添加、修改和刪除。修改和刪除可以參看上一篇文章，這篇重點在於添加。在點擊添加小圖標時，效果如下：
會彈出對話框，提示用戶是添加同級節點還是子節點，如果當前節點是葉子節點，則不能添加同級節點，因爲這可以由它的父節點添加子節點來完成。這樣一來，添加的同級節點都是父節點，即isParent:true。
彈出的對話框使用到了artDialog，可網上下載。
代碼如下：
<%@ page language="java" contentType="text/html; charset=utf-8"
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" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
</head>
<script type="text/javascript" src="<%=basePath %>/js/jquery-1.8.1.js"></script>
<script type="text/javascript" src="<%=basePath %>/js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="<%=basePath %>/js/jquery.artDialog.js"></script>
<link href="<%=basePath %>/css/zTreeStyle.css" rel="stylesheet" type="text/css"/>
<link href="<%=basePath %>/css/idialog.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
var zTree;
var setting = {
view:{
addHoverDom:addHoverDom,
removeHoverDom:removeHoverDom,
selectedMulti:false
},
edit: {
enable: true,
editNameSelectAll:true,
removeTitle:'刪除',
renameTitle:'重命名'
},
data: {
/* keep:{
parent:true,
leaf:true
}, */
simpleData: {
enable: true
}
},
callback:{
beforeRemove:beforeRemove,//點擊刪除時觸發，用來提示用戶是否確定刪除
beforeEditName: beforeEditName,//點擊編輯時觸發，用來判斷該節點是否能編輯
beforeRename:beforeRename,//編輯結束時觸發，用來驗證輸入的數據是否符合要求
onRemove:onRemove,//刪除節點後觸發，用戶後臺操作
onRename:onRename,//編輯後觸發，用於操作後臺
beforeDrag:beforeDrag,//用戶禁止拖動節點
onClick:clickNode//點擊節點觸發的事件
}
};
var zNodes =[
{ id:1, pId:0, name:"父節點 1", open:true},
{ id:11, pId:1, name:"去百度",url:'http://www.baidu.com',target:'_blank'},
{ id:12, pId:1, name:"葉子節點 1-2"},
{ id:13, pId:1, name:"葉子節點 1-3"},
{ id:2, pId:0, name:"父節點 2", open:true},
{ id:21, pId:2, name:"葉子節點 2-1"},
{ id:22, pId:2, name:"葉子節點 2-2"},
{ id:23, pId:2, name:"葉子節點 2-3"},
{ id:3, pId:0, name:"父節點 3", open:true},
{ id:31, pId:3, name:"葉子節點 3-1"},
{ id:32, pId:3, name:"葉子節點 3-2"},
{ id:33, pId:3, name:"葉子節點 3-3"}
];
$(document).ready(function(){
zTree = $.fn.zTree.init($("#tree"), setting, zNodes);
});
function beforeRemove(e,treeId,treeNode){
return confirm("你確定要刪除嗎？");
}
function onRemove(e,treeId,treeNode){
if(treeNode.isParent){
var childNodes = zTree.removeChildNodes(treeNode);
var paramsArray = new Array();
for(var i = 0; i < childNodes.length; i++){
paramsArray.push(childNodes[i].id);
}
alert("刪除父節點的id爲："+treeNode.id+"\r\n他的孩子節點有："+paramsArray.join(","));
return;
}
alert("你點擊要刪除的節點的名稱爲："+treeNode.name+"\r\n"+"節點id爲："+treeNode.id);
}
function beforeEditName(treeId,treeNode){
/* if(treeNode.isParent){
alert("不準編輯非葉子節點！");
return false;
} */
return true;
}
function beforeRename(treeId,treeNode,newName,isCancel){
if(newName.length < 3){
alert("名稱不能少於3個字符！");
return false;
}
return true;
}
function onRename(e,treeId,treeNode,isCancel){
alert("修改節點的id爲："+treeNode.id+"\n修改後的名稱爲："+treeNode.name);
}
function clickNode(e,treeId,treeNode){
if(treeNode.id == 11){
location.href=treeNode.url;
}else{
alert("節點名稱："+treeNode.name+"\n節點id："+treeNode.id);
}
}
function beforeDrag(treeId,treeNodes){
return false;
}
var newCount = 1;
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='添加子節點' οnfοcus='this.blur();'></span>";
sObj.after(addStr);
var btn = $("#addBtn_"+treeNode.tId);
if (btn) btn.bind("click", function(){
//在這裏向後臺發送請求保存一個新建的葉子節點，父id爲treeNode.id,讓後將下面的100+newCount換成返回的id
//zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, name:"新建節點" + (newCount++)});
art.dialog({
id: 'testID',
content: '您想要添加同級節點還是子節點？',
button: [
{
name: '同級節點',
callback: function () {
if(!treeNode.isParent){
art.dialog({
content:'葉子節點不能建立同級節點',
ok:function(){}
});
return;
}
var parentNode = treeNode.getParentNode();
var pId = 0;
if(parentNode != null){
pId = parentNode.id;
}
zTree.addNodes(parentNode,{'id':(100+newCount),'pId':pId,'name':'新建同級節點','isParent':true});
},
focus: true
},
{
name: '子節點',
callback: function () {
zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, name:"新建子節點" + (newCount++)});
},
focus:true
},
{
name: '取消'
}
]
});
return false;
});
}
function removeHoverDom(treeId,treeNode){
$("#addBtn_"+treeNode.tId).unbind().remove();
}
</script>
<body>
<ul id="tree" class="ztree"></ul>
</body>
</html>
PS:如果引入了zTreeStyle.css，前面的加號小圖標仍無法顯示，需在改文件中添加：
.ztree li span.button.add {margin-right:2px; background-position:-143px 0px; vertical-align:top; *vertical-align:middle}