ztree树制作（增、删、重命名、复制）

最新推荐文章于 2022-12-01 12:46:52 发布

JACHJJ

最新推荐文章于 2022-12-01 12:46:52 发布

阅读量690

点赞数

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/weixin_43326625/article/details/104538954

版权

本文详细介绍了使用ZTree实现设计树的过程，包括树状结构的外观设计、功能实现及交互方式。通过具体代码示例，讲解了如何进行节点的添加、复制、重命名和删除操作，并解决了在使用ZTree过程中遇到的官方文档错误问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

设计树

1，树外观：三级树+图标
2，树功能：双击打开图谱页+右键菜单
一级：新建
二级：新建图谱页，重命名，删除，复制，剪切，粘贴
三级：打开，重命名，删除，复制，剪切，粘贴

实现树

工具：ztree（增删改查教程）+JS等。
可能用到的方法：代码增加实例

遇到的困难

ztree官方文档！竟然有错误！id与tId
id和tId

核心代码

1.js部分（增）

function addHoverDom(treeId, treeNode) {
    var aObj = $("#" + treeNode.tId + "_a");
    if ($("#addBtn_"+treeNode.tId).length>0) return;
    var editStr = "<span id='addBtn_space_" +treeNode.tId+ "' > </span>"
        + "<button type='button' class='addBtn1' id='addBtn_" + treeNode.tId
        + "' title='"+treeNode.name+"' onfocus='this.blur();'></button>";
    aObj.append(editStr);
    var btn = $("#addBtn_"+treeNode.tId);
    if (btn) btn.bind("click", function(){
        //点击按钮发生的事情
        // alert("diy Button for " + treeNode.name);
        var zTreeObj1 = $.fn.zTree.getZTreeObj(treeId);
        var newNode = {name:'sonOf'+treeNode.tId};
        newNode = zTreeObj1.addNodes(treeNode,newNode);
    });
};
function removeHoverDom(treeId, treeNode) {
    $("#addBtn_"+treeNode.tId).unbind().remove();
    $("#addBtn_space_" +treeNode.tId).unbind().remove();
};

2.css部分（增）

.addBtn1{
    background: #000 url("../../image/ads.png");
    width: 16px;
    height: 16px;
}

3.js代码（复制）
重点：
showRemoveBtn: true,//删
showRenameBtn: true,//重命名
removeTitle: “remove”,//删
renameTitle: “rename”,//重命名
drag:{
isCopy: true,//复制
isMove: false//为复制屏蔽移动
}
},

var setting;
setting = {
    callback: {
        onClick: ClickTree
    },
    edit: {
        enable: true,
        showRemoveBtn: true,
        showRenameBtn: true,
        removeTitle: "remove",
        renameTitle: "rename",
        drag:{
            isCopy: true,
            isMove: false
        }
    },
    view: {
        addHoverDom: addHoverDom,
        removeHoverDom: removeHoverDom
    }
};

2，重命名判断
参考高级重命名
3，数组删除