ztree实现编辑和删除功能
前面写了一篇ztree实现根节点单击事件，显示节点信息https://cloud.tencent.com/developer/article/1347174，其中的删除和编辑功能是自定义实现的，现在直接使用文档里面的功能。实现的效果如下图示：
1:首先要引入相关的文件，注意一定要引入这个jquery.ztree.exedit-3.5.min.js，之前因为忘记引入，导致项目里面删除和编辑的图标出不来。
<link rel="stylesheet" type="text/css"
href="com/ztree_v3/css/zTreeStyle/zTreeStyle.css" />
<link rel="stylesheet" type="text/css"
href="com/ztree_v3/ztree_custom.css" />
<script src="com/ztree_v3/js/jquery.ztree.core-3.5.min.js"></script>
<script src="com/ztree_v3/js/jquery.ztree.excheck-3.5.min.js"></script>
<script src="com/ztree_v3/js/jquery.ztree.exedit-3.5.min.js"></script>2:removeTitle删除按钮的 Title 辅助信息,鼠标移动到 删除按钮 上时，浏览器自动弹出的辅助信息内容，可根据用户需要自行修改。
renameTitle编辑名称按钮的 Title 辅助信息,设置鼠标移动到 编辑名称按钮 上时，浏览器自动弹出的辅助信息内容，可根据用户需要自行修改。
edit : {
enable : true,
showRemoveBtn : true,
removeTitle : "删除节点",
renameTitle : "编辑节点名称",
showRenameBtn : true,
},3:beforeRemove : zTreeBeforeRemove,用于捕获节点被删除之前的事件回调函数，并且根据返回值确定是否允许删除操作。
onRemove : zTreeOnRemove删除节点时，弹出被删除的节点的 tId 以及 name 信息。
callback : {
// 单击事件
onClick : zTreeOnClick,
beforeRemove : zTreeBeforeRemove,
onRemove : zTreeOnRemove
}4：显示删除图标，显示编辑按钮。
// 显示删除图标
function setRemoveBtn(treeId, treeNode) {
return true;
}
// 显示编辑按钮
function setRenameBtn(treeId, treeNode) {
return true;
}
// 删除之前事件
function zTreeBeforeRemove(treeId, treeNode) {
return confirm("是否确认删除？") == true;
}5:删除节点事件,ajax向后端发送请求，删除数据库里面的ztree节点。
// 删除节点事件
function zTreeOnRemove(event, treeId, treeNode) {
alert(treeNode.tId + ", " + treeNode.name);
$.ajax({
url : basePath + "/xxx/" + treeNode.id,
type : "DELETE",
success : function(data) {
location.reload();
}
});
}示例代码：
var basePath = getContextPath();
initTree();
var setting = {
check : {
enable : false
},
data : {
key : {
id : "id"
},
simpleData : {
enable : true,
idKey : "id",
pIdKey : "pId"
}
},
edit : {
enable : true,
showRemoveBtn : true,
removeTitle : "删除节点",
renameTitle : "编辑节点名称",
showRenameBtn : true,
},
callback : {
// onRightClick : onRightClick,
// 单击事件
onClick : zTreeOnClick,
beforeRemove : zTreeBeforeRemove,
onRemove : zTreeOnRemove
}
};
var zTreeObj;
function initTree() {
$.get(basePath + "/xxx/ztree", function(data) {
zTreeObj = $.fn.zTree.init($("#organTree"), setting, data);
zTreeObj.expandAll(false);
});
}
// 显示删除图标
function setRemoveBtn(treeId, treeNode) {
return true;
}
// 显示编辑按钮
function setRenameBtn(treeId, treeNode) {
return true;
}
// 删除之前事件
function zTreeBeforeRemove(treeId, treeNode) {
return confirm("是否确认删除？") == true;
}
// 删除节点事件
function zTreeOnRemove(event, treeId, treeNode) {
$.ajax({
url : basePath + "/xxxx/" + treeNode.id,
type : "DELETE",
success : function(data) {
location.reload();
}
});
}原文作者：祈澈姑娘 技术博客：https://www.jianshu.com/u/05f416aefbe1 90后前端妹子，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019.06.05 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读