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后前端妹子,爱编程,爱运营,文艺与代码齐飞,魅力与智慧共存的程序媛一枚。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券