zTree树形图实例(jQuery 树插件)--菜单侧边栏
zTree的树形图显示、右键事件、新增节点、修改节点、删除节点、选中节点等功能。javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../frames/zTree_v3/css/zTreeStyle/zTreeStyle.css"/>
</head>
<body>
<div class="body-side">
<ul id="treeDemo" class="ztree"></ul>
</div>
</body>
<script src="../frames/jquery-1.11.1.min.js"></script>
<script src="../frames/zTree_v3/js/jquery.ztree.all.js"></script>
<script type="text/javascript">
/*ztree右键事件新增节点-liuyuru*/
function zTreeRightClick(event, treeId, treeNode) {
var parentvalue;
if (treeNode) {
parentvalue = treeNode.id;
} else {
parentvalue = 0;
}
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
treeObj.addNodes(treeNode, {
id: 10, //动态更改
pId:parentvalue,
name: "NewNode"
});
var node = treeObj.getNodeByParam("id", 10, null); //根据新的id找到新添加的节点
// treeObj.selectNode(node); //让新添加的节点处于选中状态
treeObj.editName(node);
}
/*ztree新增节点图标绑定事件-liuyuru*/
function myztreebind(btn, treeNode) {
if (btn) btn.bind("click", function () {
alert("新增");
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
treeObj.addNodes(treeNode, {
id: 10, //动态更改
pId: treeNode.id,
name: "NewNode"
});
var node = treeObj.getNodeByParam("id", 10, null); //根据新的id找到新添加的节点
treeObj.selectNode(node); //让新添加的节点处于选中状态
treeObj.editName(node);
});
}
/*确认修改节点-liuyuru*/
function onRename(e, treeId, treeNode, isCancel) {
alert("修改");
}
/*删除节点-liuyuru*/
function beforeRemove(treeId, treeNode) {
var flag = false; //此处必须定义一个变量，否则还没肯定就把节点从树上删除
if(!flag){
flag = true;
alert("删除");
}
return flag;
}
/*公用ztree*/
var postId;
var myZtree={
show:function (data, treeNodes,isexpanAll) {
/*ztree对象的配置数据-liuyuru*/
setvalue = {
view: {
addHoverDom: myZtree.addHoverDom,//鼠标移动到节点上时，显示用户自定义控件
removeHoverDom: myZtree.removeHoverDom,//须要与addHoverDom同时使用,隐藏用户自定义控件
selectedMulti: false,
showLine: false,
showIcon: true,
addDiyDom: myZtree.addDiyDom //用于在节点上固定显示用户自定义控件
},
edit: {
enable: true, //单独设置为true时，可加载修改、删除图标
editNameSelectAll: true
},
data: {
simpleData: {
enable: true
}
},
async: {
enable: true
},
callback: {
onClick: myZtree.zTreeOnClick,/*单击事件查询菜单-liuyuru*/
onRightClick: zTreeRightClick,//右键事件
beforeRename: myZtree.beforeRename,
beforeRemove: beforeRemove, //删除事件
onRename: onRename //修改重命名
}
};
$.fn.zTree.init($("#treeDemo"), setvalue, treeNodes);
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
treeObj.expandAll(isexpanAll); //打开节点
if (data && treeNodes) {
postId = data[0].id === undefined ? data[0].id : 0;
if (postId) {
var treeNode = treeObj.getNodeByTId("treeDemo_1");
var node = treeObj.getNodeByParam("id", postId, null); //根据新的id找到新添加的节点
treeObj.selectNode(node); //让新添加的节点处于选中状态
}
}
},
zTreeOnClick:function(event, treeId, treeNode) {
postId = treeNode.id;
alert("选中")
},
addHoverDom:function(treeId, treeNode) {
/*节点小于2的才有新增按钮功能*/
if (treeNode.level < 2) {
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='add node' onfocus='this.blur();'></span>";
sObj.after(addStr); //加载添加按钮
var btn = $("#addBtn_" + treeNode.tId);
//绑定添加事件，并定义添加操做 需操做的调用页就必须存在该事件
myztreebind(btn, treeNode);
}
},
removeHoverDom :function(treeId, treeNode) {
$("#addBtn_" + treeNode.tId).unbind().remove();
},
addDiyDom:function(treeId, treeNode) {
var switchObj = $("#" + treeNode.tId + "_switch"), // 占位元素
icoObj = $("#" + treeNode.tId + "_ico"), // 图标元素
sObj = $("#" + treeNode.tId + "_span"); //获取节点信息
/*图标位置的更换*/
// if (!treeNode.children) {
// sObj.before(switchObj);
// }
},
beforeRename:function(treeId, treeNode, newName, isCancel) {
if (newName.length == 0) {
alert("名称不能为空!");
return false;
}
return true;
}
};
/*生成树形图*/
drag();
function drag() {
var data =[{id:1, pId:0, name: "父节点1"},
{id:11, pId:1, name: "子节点1"},
{id:12, pId:1, name: "子节点2"}];
var treeNodes = [];
for (var key in data) {
treeNodes[key] = {};
treeNodes[key]['id'] = data[key].id;
treeNodes[key]['name'] = data[key].name;
treeNodes[key]['pId'] = data[key].pId;
}
myZtree.show(data, treeNodes, true);
}
</script>
</html>
如图（新增按钮本身更换图标）：
更多功能查询zTree – jQuery 树插件。php