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' οnfοcus='this.blur();'> 添加子節點 </button>
                            <button type='button' class='btn btn-sm btn-primary' id='diyBtn_${treeNode.id}_modify' οnfοcus='this.blur();'> 修改 </button>
                            <button type='button' class='btn btn-sm btn-danger' id='diyBtn_${treeNode.id}_delete' οnfοcus='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​

​ 會觸發多次，如果沒有這段判斷，看起來是這樣的：

三、最終效果