Ztree節點前加上兩個自定義按鈕

前言：

在我的權限管理模塊遇到了給某些角色加權限的問題，這時就需要實現將每個模塊做成樹，在每個節點前加上預覽和編輯的按鈕，這樣可以根據數據庫的某個字段給每個角色賦權限。

必須必須吐槽的是，這部分的功能在網上沒找到類似的，所以花了我好長的時間去研究，不過這事已經過去很久了，最近測試代碼的時候拿出來看看，當時有些遺留的問題都豁然開朗了。當然這么寫我一直都覺得不好，特別是最后跟據按鈕icon名稱選擇節點信息，總覺得不好，但是又實在沒想到好辦法，希望有大佬指教。

需求：

Ztree節點前添加編輯和預覽按鈕

實現效果：

實現步驟：
前提是對ztree有些了解。

使用的是ztree官方文檔里的addDiyDom，下圖是該方法介紹。

附上Ztree官方文檔地址：點擊這里

然后我們模仿該方法可以將節點前面加上自己想要的按鈕，官方文檔里只加了一個，我這邊加上了兩個，因為分了預覽和編輯的權限。

function addDiyDom(treeId, treeNode) {
        var aObj = $("#" + treeNode.tId + "_a");
        var preview = "<image src='"+seeCloseIcon+"' class='diyBtn1' id='diyBth_"+ treeNode.module_code + "' onclick='preview(this)'></image>";
        var compile = "<image src='"+editCloseIcon+"' class='diyBtn2' id='diyBth_"+ treeNode.id + "' onclick='compile(this)'></image>";
        aObj.before(preview).before(compile);
    }        

紅色標出的是該按鈕的icon,接下來寫橙色標出的按鈕的onclick方法，即按鈕點擊圖片切換，有個小細節即有編輯權限的一定需要先有預覽權限。

    function preview(d) {// 預覽
        if(d.src.search(seeCloseIcon)!=-1) {
            d.src=seeOpenIcon;
        }else{
　　　　　　  d.src = seeCloseIcon;
            if(d.nextSibling.src.search(editOpenIcon) != -1) {
               d.nextSibling.src = editCloseIon;
            } 
        }
    }
    
    function compile(d1) { // 編輯
        if(d1.src.search(editCloseIcon)!=-1) {
            d1.src = editOpenIcon;
            // 判斷該元素之前的預覽權限，有編輯權限必須有預覽權限
            if(d1.previousSibling.src.search(seeCloseIcon)!=-1) {
                d1.previousSibling.src = seeOpenIcon;
            }
        }else{
            d1.src=editCloseIcon;
        }
    }

這樣的話就實現了ztree節點前加按鈕的效果，但是如何獲得選中的節點的信息？

這里我根據按鈕src的圖片名稱選擇，使用$('.diyBtn1').each(function() {}方法遍歷所有class為diyBtn1的按鈕，判斷按鈕的src名稱為選中還是未選中，選中的話就獲得其節點信息，多個節點用逗號隔開拼接成字符串存放在隱藏域中。參考代碼如下（總覺得這個方法不好，但又想不出什么好辦法，后續有好辦法再記錄）：

function zTreeOnCheck() {
        var id = "";// 僅擁有預覽權限
        var id2 = "";// 同時擁有預覽和編輯權限
        $('.diyBtn1').each(function() {
            var src = $(this)[0].src;
            var nextSrc = $(this).next()[0].src;
            
            var priviewIconName = src.substring(src.lastIndexOf('/'),src.lastIndexOf('.'));
            var compileIconName = nextSrc.substring(nextSrc.lastIndexOf('/'),nextSrc.lastIndexOf('.'));
            var priviewImageName = seeOpenIcon.substring(seeOpenIcon.lastIndexOf('/'),seeOpenIcon.lastIndexOf('.'));
            var compileImageName = editOpenIcon.substring(editOpenIcon.lastIndexOf('/'),editOpenIcon.lastIndexOf('.'));
            
            if(priviewIconName == priviewImageName) {
                if(compileIconName == compileImageName) {
                    id2 += $(this)[0].id.substring($(this)[0].id.lastIndexOf('_')+1) + ",";
                }else{
                    id += $(this)[0].id.substring($(this)[0].id.lastIndexOf('_')+1) + ",";
                }
            }
        });
        if(0 < id.length) {
            id = id.substring(0, id.length - 1);
        }
        if(0 < id2.length) {
            id2 = id2.substring(0, id2.length - 1)
        }
        $("#perm_id").val(id);
        $("#perm_id2").val(id2);
    }