Skip to content

zTree 添加自定义按钮 addHoverDom removeHoverDom

Kyle Bing edited this page Nov 4, 2020 · 1 revision

前言

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

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

一、需要实现的效果

 button-normal

二、如何实现

1. 原理

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

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

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

ztree-api

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

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

ztree-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 会触发多次,如果没有这段判断,看起来是这样的:

ztree-unusual

三、最终效果

 button-normal