ztree实现编辑和删除功能

前面写了一篇ztree实现根节点单击事件，显示节点信息https://www.jianshu.com/p/1e0ca6d8afad，其中的删除和编辑功能是自定义实现的，现在直接使用文档里面的功能。实现的效果如下图示：

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后前端妹子，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，前端资源下载群：440185135