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属性，然后加上自己的图标地址即可。