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

原创
2022/05/09 06:20
阅读数 1K

简介

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 如何实现拖拽节点

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部