轉：zTree高階入門：如何通過擴充套件節點的屬性來達到是否顯示節點的刪除編輯等圖示（按鈕）...

當我們在使用ztree樹元件的節點編輯功能時，只要我們引入了ztree相關節點編輯的js指令碼檔案：

<script type="text/javascript" src=”/js/jquery.ztree.exedit-3.5.js"></script>

 

接著配置setting內的edit節點：

 

var setting = {
            edit: {
                enable: true,
                showRenameBtn: true,
                showRemoveBtn: true
            },

 

 

當我們ztree樹載入完成後，我們將滑鼠移動至每一個樹節點上，節點後面均會顯示兩個圖示，一個“刪除節點”圖示，一個是“編輯節點”圖示。點選後可以進行節點的編輯和刪除操作。

這樣雖然很完美，但是還不夠完美，如果我們針對某些節點不需要不需要進行節點的編輯或者刪除操作，換言之就是某些節點不讓其顯示操作的圖示。怎麼辦呢？

很顯然，ztree樹控制元件對於這一點上做得還不是很夠，但是它已經給我們留了很大的擴充套件空間。

解決方案如下：

1、給節點擴充套件兩個屬性：noRemoveBtn和noEditBtn，分別設定為true表示均不顯示操作圖示。當然這裡配置是第一步，還有第二步的哦。

示例程式碼如下：

 

var zNodes = [
            { id: 1, pId: 0, name: "父節點 1", open: true, noRemoveBtn: true, noEditBtn: true },
            { id: 11, pId: 1, name: "葉子節點 1-1",noRemoveBtn: false,noEditBtn:true },
            { id: 12, pId: 1, name: "葉子節點 1-2" },
            { id: 13, pId: 1, name: "葉子節點 1-3" }
                 ];

 

2、我們將setting內的edit節點下的showRenameBtn、showRemoveBtn兩個屬性就行修改，變成一個方法來返回是否顯示圖示，形如：

 

edit: {
                enable: true,
                showRenameBtn: showRenameBtn
            },

 

3、編寫showRenameBtn(treeId,treeNode)方法，這裡以是否顯示節點編輯圖示為例：

 

 //是否顯示編輯按鈕
function showRenameBtn(treeId, treeNode) { 
            //獲取節點所配置的noEditBtn屬性值           
            if (treeNode.noEditBtn != undefined && treeNode.noEditBtn) {
                return false;
            } else
                return true;
}

 

重新整理我們的頁面，然後就可以看到第一二個節點當我們滑鼠移動上去的時候後面圖示的顯示情況。

補充：

1、showRenameBtn(treeId,treeNode)方法的執行或者觸發是當我們滑鼠移動至某個節點上時觸發或者執行的，所以我們能夠很清楚地知道節點的物件，接著判斷其屬性值情況。