前言：

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

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

需求：

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

實現效果：

實現步驟：

前提是對ztree有些了解。

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

附上Ztree官方文檔地址：

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

functionaddDiyDom(treeId, treeNode) {var aObj = $("#" + treeNode.tId + "_a");var preview = "";var compile = "";

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名稱為選中還是未選中，選中的話就獲得其節點信息，多個節點用逗號隔開拼接成字符串存放在隱藏域中。參考代碼如下(總覺得這個方法不好，但又想不出什么好辦法，后續有好辦法再記錄)：

functionzTreeOnCheck() {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= id.substring(0, id.length - 1);

}if(0

id2= id2.substring(0, id2.length - 1)

}

$("#perm_id").val(id);

$("#perm_id2").val(id2);

}

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的ztree 自定义参数_Ztree节点前加上两个自定义按钮的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。