zTree 添加自定义按钮 addHoverDom removeHoverDom

前言

本文适用对象：已经很了解 zTree 的使用方法，知道 zTree 的基础使用，并能列出图表。 如果你还不能列出自己的图表，还是先去官方看一下入门文档，再来看本文。

官方地址 API： http://www.treejs.cn/v3/api.php

一、需要实现的效果

二、如何实现

1. 原理

需要用到的是 ztree 配置中的 view 中的两个方法：

• addHoverDom 鼠标移入时的方法，这个方法会触发多次，后面有个地方会讲到
• removeHoverDom 鼠标移出时的方法

查看一下官方文档关于这两个方法的解释：

对应下面有例子，可以直接使用，这里解释几点：

treeNode.tId 指的是 dom节点对应的 id 前缀，如下图，这个节点的 tId 就是 areaThree_97。 这个 tId 其实是为了你定位当前节点用的。 看下面具体例子

2. 代码

var displayTreeSetting = {
    data: {
        simpleData: {
            enable: true,
            idKey: "id",
            pIdKey: "pid",
            rootPId: -1
        },
        key: {
            url:"nourl"
        }
    },
    view: {
        addHoverDom: function (treeId, treeNode) {
            // treeId 对应的是当前 tree dom 元素的 id
            // treeNode 是当前节点的数据
            var aObj = $("#" + treeNode.tId + "_a"); // 获取节点 dom
            if ($("#diyBtnGroup").length>0) return; 
            // 查看是否存在自定义的按钮组，因为 addHoverDom 会触发多次
            
            var editStr = `<span id='diyBtnGroup'>
                            <span id='diyBtn_space_${treeNode.id}'> </span>
                            <button type='button' class='btn btn-sm btn-success' id='diyBtn_${treeNode.id}_add' onfocus='this.blur();'> 添加子节点 </button>
                            <button type='button' class='btn btn-sm btn-primary' id='diyBtn_${treeNode.id}_modify' onfocus='this.blur();'> 修改 </button>
                            <button type='button' class='btn btn-sm btn-danger' id='diyBtn_${treeNode.id}_delete' onfocus='this.blur();'> 删除 </button>
                        </span>`;
            aObj.append(editStr);
            var btnDelete = $('#diyBtn_'+treeNode.id + '_delete');
            var btnAdd = $('#diyBtn_'+treeNode.id + '_add');
            var btnModify = $('#diyBtn_'+treeNode.id + '_modify');
            if (btnDelete) btnDelete.bind("click", function (){vm.delete(treeNode)});
            if (btnAdd) btnAdd.bind("click", function (){vm.add(treeNode)});
            if (btnModify) btnModify.bind("click", function (){vm.modify(treeNode)});
        },
        removeHoverDom: (treeId, treeNode) => {
            // 为了方便删除整个 button 组，上面我用 #diyBtnGroup 这个包了起来，这里直接删除外层即可，不用挨个找了。
            $("#diyBtnGroup").unbind().remove();
        },
    }
};

这里注意一下这段代码：

if ($("#diyBtnGroup").length>0) return; 
// 查看是否存在自定义的按钮组，因为 addHoverDom 会触发多次

addHoverDom 会触发多次，如果没有这段判断，看起来是这样的：

三、最终效果