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


首先需要注意一點,如果有研究過樹形菜單,就會發現實現刪除和修改功能特別簡單,但是增加卻有一點復雜。造成這個現象是ztree樹形菜單的歷史遺留問題。大概是之前的版本沒有增加這個功能,后來的版本加上了這個功能,造成了增加和別的功能不一樣。

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

一、需要引入的文件和界面

二、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。

三、換圖標

在json數據中手動加入一個icon屬性,然后加上自己的圖標地址即可。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM