07.01 默认的编辑、删除功能 —— 关于 节点编辑

简介

zTree 经常用于菜单、目录树显示，但同样的，也会应用在管理后台，这时候必不可少的就是编辑功能。所以 zTree 提供了 exedit 扩展包，专门用于树的编辑。

看这篇文档时，你需要对照 API 文档进行学习（http://www.treejs.cn/v3/api.php）

zTree 默认的编辑功能

参考 Demo：http://www.treejs.cn/v3/demo.php#_304

参考 Demo：http://www.treejs.cn/v3/demo.php#_301

开启默认编辑功能很简单，只需要以下几点：

• 保证加载了 zTree 的 jquery.ztree.all.js 或 (jquery.ztree.core.js + jquery.ztree.exedit.js)
• 设置 setting.edit.enable = true

1、添加节点

由于开始制作 zTree 时，脑筋短路，只想着用户会有不同的方式添加节点，所以死活没有把添加按钮加到 zTree 的默认功能里面。

只是提供了标准的 js 方法：addNodes

想实现 添加按钮 请看文章 7.03 如何实现 新增节点的按钮

2、删除节点

删除按钮配置

var setting = {
    edit: {
        // 所有的节点都显示删除按钮
        showRemoveBtn: true, 
        // 删除按钮的 tooltip 信息
        removeTitle: '删除'  
    }
};

// 这两个设置都支持 function，可以对节点进行个性化设置
var setting = {
    edit: {
        // 只有叶子节点才显示删除按钮
        showRemoveBtn: function(treeId, treeNode) {
            return !treeNode.isParent;
        }, 
        // 删除按钮的 tooltip 信息
        removeTitle: function(treeId, treeNode) {
            return '删除 ' + treeNode.name;
        }  
    }
};

js 方法

// 删除节点
zTreeObj.removeNode(treeNode);

对应的回调

var setting = {
    callback: {
        // 删除操作之前触发，可以让你阻止删除
        beforeRemove: function(treeId, treeNode) {....},
        // 删除之后触发
        onRemove: function(e, treeId, treeNode) {....},
    }
};

3、编辑节点

编辑按钮配置

var setting = {
    edit: {
        // 所有的节点都显示编辑按钮
        showRenameBtn: true, 
        // 编辑按钮的 tooltip 信息
        renameTitle: '编辑'  
    }
};

// 这两个设置都支持 function，可以对节点进行个性化设置
var setting = {
    edit: {
        // 只有叶子节点才显示编辑按钮
        showRenameBtn: function(treeId, treeNode) {
            return !treeNode.isParent;
        }, 
        // 删除按钮的 tooltip 信息
        renameTitle: function(treeId, treeNode) {
            return '编辑 ' + treeNode.name;
        }  
    }
};

js 方法

//进入 zTree 的编辑状态
zTreeObj.editName(treeNode);

对应的回调

var setting = {
    callback: {
        // 编辑按钮点击之后触发，可以阻止 zTree 默认的节点编辑状态
        beforeEditName: function(treeId, treeNode) {....},
        // 重命名操作之前触发，可以让你进行校验，并阻止重命名
        beforeRename: function(treeId, treeNode, newName, isCancel) {....},
        // 重命名之后触发
        onRename: function(e, treeId, treeNode, isCancel) {....},
    }
};

4、节点拖拽

zTree 开启编辑模式后，默认就可以对节点进行拖拽操作，如果你希望能够精确控制节点的拖拽，请看下一篇 7.02 如何实现拖拽节点