ztree樹形菜單的增長刪除修改和換圖標

首先須要注意一點，若是有研究過樹形菜單，就會發現實現刪除和修改功能特別簡單，可是增長卻有一點複雜。形成這個現象是ztree樹形菜單的歷史遺留問題。大概是以前的版本沒有增長這個功能，後來的版本加上了這個功能，形成了增長和別的功能不同。

先說編輯和刪除，注意：樹形菜單內容是從json中獲取的。

1、須要引入的文件和界面

2、js部分，設置setting

var zTreeObj;
// zTree 的參數配置，深刻使用請參考 API 文檔（setting 配置詳解）
var setting = {
edit:{
enable: true,
drag:{
isMove:true,
prev:true,
autoOpenTime: 0
},
editNameSelectAll: true,
showRemoveBtn: true,
removeTitle: "刪除節點",
renameTitle: "編輯節點名稱",
showRenameBtn: true,
},

data: {
simpleData: {
enable: true,
idKey: "id",
nameKey: "name"
}

}

};

而後在經過ajax獲取菜單之後，進行初始化

$(document).ready(function(){
$.ajax({
url:'tree.json',
type: "get",
dataType: "json",
success:function(data){
//樹形菜單初始化
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting,data);
},
error:function(xhr){
alert(xhr.status);
}
});
});

效果：

當鼠標懸浮上去的時候效果：

點擊後面的按鈕就能夠進行編輯和刪除了。

三，介紹增長按鈕：

在setting中增長view的設置:

而後是addHoverDom函數，用於添加增長按鈕功能，還有removeHoverDom函數，用於當鼠標移出菜單的時候去掉增長按鈕。

function addHoverDom(treeId,treeNode){
var sObj = $("#" + treeNode.tId + "_span");
if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
+ "' title='添加子節點' onfocus='this.blur();'></span>";
sObj.after(addStr);
var btn = $("#addBtn_"+treeNode.tId);
if (btn) btn.bind("click", function(){
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
var newnade={id:(100 + newCount),name:"new node" + (newCount++)};
zTree.addNodes(treeNode,newnade);

$.ajax({
url:'tree.json',
type: "get",
dataType: "json",
success:function(data){
data.push(JSON.parse(newnade));
console.log(JSON.stringify(data));
//alert(data[0].children[0].children[0].id);
}
});
return false;
});

}

function removeHoverDom(treeId, treeNode) {
$("#addBtn_"+treeNode.tId).unbind().remove();
};

效果如圖：

點擊綠色的按鈕之後就能夠增長一個孩子。

還有更多的配置請參考http://www.treejs.cn。

3、換圖標

在json數據中手動加入一個icon屬性，而後加上本身的圖標地址便可。