jQuery zTree v3.5 实例4 对树的节点进行编辑和删除实现效果如下：
实现代码如下：
<%@ 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>
<link href=”<%=basePath %>/css/zTreeStyle.css” rel=”stylesheet” type=”text/css”/>
<script type=”text/javascript”>
var zTree;
var setting = {
view:{
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;
}
}
function beforeDrag(treeId,treeNodes){
return false;
}
</script>
<body>
<ul id=”tree” class=”ztree”></ul>
</body>
</html>
本文链接地址: jQuery zTree v3.5的使用实例对树的节点进行删除与编辑