jQuery zTree v3.5 实例5 对树节点的增、删、改，添加时包含添加同级节点和子节点

来源：互联网发布：美颜软件反杀软件primo 编辑：程序博客网时间：2024/06/05 14:41

最终效果如下：

当鼠标移动到节点时，后面会出现三个小图标，依次代表添加、修改和删除。修改和删除可以参看上一篇文章，这篇重点在于添加。在点击添加小图标时，效果如下：

会弹出对话框，提示用户是添加同级节点还是子节点，如果当前节点是叶子节点，则不能添加同级节点，因为这可以由它的父节点添加子节点来完成。这样一来，添加的同级节点都是父节点，即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='添加子节点' onfocus='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}