最近在项目当中遇到一个需求，需要以树结构的方式展示一些数据，并可对每一个树节点做内容的编辑以及树节点的添加和删除，刚好听说有zTree这个插件可以实现这样的需求，所以在项目的这个需求完成之后，在博客里用一个小demo的形式记录一下zTree的简单实用方法。
1、下载zTree插件
zTree的官网地址是：http://www.treejs.cn/v3/main.php#_zTreeInfo
下载地址是：https://gitee.com/zTree/zTree_v3
2、引入相应的css和js文件
zTreeStyle.css
jquery.min.js
jquery.ztree.core.min.js
jquery.ztree.excheck.min.js
jquery.ztree.exedit.min.js
3、不说废话，直接代码，简洁明了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>zTree的简单实用</title>
<link rel="stylesheet" href="zTreeStyle.css">
<script src="jquery.min.js"></script>
<script src="jquery.ztree.core-3.5.min.js"></script>
<script src="jquery.ztree.excheck-3.5.min.js"></script>
<script src="jquery.ztree.exedit-3.5.min.js"></script>
<style>
.ztree li {line-height: 25px;}
.ztree li span.button.switch {height: 20px;margin-top: -7px;}
.ztree li span.button.ico_open,
.ztree li span.button.ico_close {background-image: none; width: 0px;margin-left: -2px;}
.ztree li span.button.ico_docu {background-image: none; width: 0px;}
.ztree li a {height: 25px;}
.ztree li span {font-size: 14px;font-family: "PingFang SC", "Hiragino GB", "Microsoft YaHei", "Helvetica Neue", "Helvetica", "ARIAL"}
.ztree li a.curSelectedNode {height: 18px;}
.ztree li a.curSelectedNode_Edit{height: 18px;}
.ztree li a.curSelectedNode_Edit span {display: inline-block;height: 18px;}
.ztree li a.curSelectedNode_Edit input {display: inline-block;height: 18px;font-size: 14px;width: 100%;min-width: 150px;font-family: "PingFang SC", "Hiragino GB", "Microsoft YaHei", "Helvetica Neue", "Helvetica", "ARIAL"}
.ztree li a.curSelectedNode {max-width: 260px;overflow: hidden;}
.ztree li span {max-width: 185px;display: inline-block;overflow: hidden;}
.ztree li span input{width: 150px;}
.ztree li span.button.add {margin-left: 2px;background-position: -144px 0;vertical-align: top;background-image: url(imgs/jui.png);background-position-x: -278px;background-position-y: -237px;}
.ztree li span.button.edit {margin-left: 3px;background-position: -144px 0;vertical-align: top;background-image: url(imgs/jui.png);background-position-x: 2px;background-position-y: 3px;}
.ztree li span.button.remove {background-position: -144px 0;vertical-align: top;background-image: url(imgs/jui.png);background-position-x: -138px;background-position-y: -137px;}
.ztree li span.button.roots_close, .ztree li span.button.root_close, .ztree li span.button.center_close, .ztree li span.button.bottom_close
{background-image: url(imgs/jui.png);background-position-x: -77px;background-position-y: -196px;}
.ztree li span.button.roots_open, .ztree li span.button.root_open, .ztree li span.button.center_open, .ztree li span.button.bottom_open
{background-image: url(imgs/jui.png);background-position-x: -117px;background-position-y: -196px;}
</style>
</head>
<body>
<div>
<ul id="treeDemo" class="ztree"></ul>
</div>
</body>
<script>
//zTree的配置
var setting = {
view: {
addHoverDom: addHoverDom,
removeHoverDom: removeHoverDom,
selectedMulti: false
},
edit: {
enable: true,
editNameSelectAll: true,
showRemoveBtn: showRemoveBtn,
showRenameBtn: showRenameBtn
},
data: {
simpleData: {
enable: true
}
},
callback: {
onClick:zTreeOnClick, //点击选中事件
beforeDrag: beforeDrag, // 可设置是否允许拖拽功能
beforeEditName: beforeEditName,
beforeRemove: beforeRemove,
beforeRename: beforeRename,
onRemove: onRemove,
onRename: onRename
}
}; //zTree初始化加载的节点树
var zNodes =[
{ id:1, pId:0, name:"父节点 1", open:true}, //open属性的值true和false，表示是否在初始化加载后展开子节点
{ id:11, pId:1, name:"子节点 1-1"},
{ id:12, pId:1, name:"子节点 1-2"},
{ id:13, pId:1, name:"子节点 1-3"},
{ id:2, pId:0, name:"父节点 2", open:true},
{ id:21, pId:2, name:"子节点 2-1"},
{ id:22, pId:2, name:"子节点 2-2"},
{ id:23, pId:2, name:"子节点 2-3"},
{ id:3, pId:0, name:"父节点 3", open:false},
{ id:31, pId:3, name:"子节点 3-1"},
{ id:32, pId:3, name:"子节点 3-2"},
{ id:33, pId:3, name:"子节点 3-3"},
]; var log, className = "dark";
function zTreeOnClick(event, treeId, treeNode) {
console.log('zTreeOnClick');
console.log(treeNode)
var treeObj = $.fn.zTree.getZTreeObj("treeDemo"),
nodes = treeObj.getCheckedNodes(true),
v = "";
for (var i = 0; i < nodes.length; i++) {
v += nodes[i].name + ",";
console.log("节点id:" + nodes[i].id + "节点名称" + v); //获取选中节点的值
}
}
function beforeDrag(treeId, treeNode) {
return false; //false=禁用拖拽功能， true=开启
}
function beforeEditName(treeId, treeNode) {
console.log('beforeEditName');
console.log(treeNode)
className = (className === "dark" ? "":"dark");
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.selectNode(treeNode);
zTree.editName(treeNode);
}
function beforeRemove(treeId, treeNode) {
console.log('beforeRemove');
className = (className === "dark" ? "":"dark");
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.selectNode(treeNode);
return confirm("确认删除 节点 -- " + treeNode.name + " 吗？");
}
function onRemove(e, treeId, treeNode) { //确定删除节点
console.log('onRemove');
console.log(treeNode)
}
function beforeRename(treeId, treeNode, newName, isCancel) {
console.log('beforeRename');
className = (className === "dark" ? "":"dark");
if (newName.length == 0) {
setTimeout(function() {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.cancelEditName();
alert("节点名称不能为空。");
}, 0);
return false;
}
return true;
}
function onRename(e, treeId, treeNode, isCancel) {
console.log('onRename')
console.log(treeNode)
}
function showRemoveBtn(treeId, treeNode) {
return true;
}
function showRenameBtn(treeId, treeNode) {
return true;
} var newCount = 1;
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);
$('.edit').attr('title', '编辑');
$('.remove').attr('title', '删除');
var btn = $("#addBtn_"+treeNode.tId);
if (btn) btn.bind("click", function(){
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
var obj = {id:(100 + newCount), pId:treeNode.id, name:"新增子节点 " + (newCount++)};
zTree.addNodes(treeNode, obj);
console.log(obj)
console.log('添加成功')
return false;
});
};
function removeHoverDom(treeId, treeNode) {
$("#addBtn_"+treeNode.tId).unbind().remove();
}; $(document).ready(function(){
console.log('ready');
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
</script>
</html>
其中的<style></style>部分是自定义的样式，主要用来更换插件默认的添加、删除、编辑、展开和收缩的小图标的
4、效果图
1、初始化加载页面后：
2、选中某个节点后，会出现添加、编辑、删除的操作图标：
3、在第一个父节点新增了一个子节点：
4、在某一个节点点击删除按钮后的确认提示：
5、点击了某一个节点的编辑按钮后，呈现可编辑状态：
6、编辑完成后点击空白处，即可完成编辑：
7、每个子节点下还可以再无限新增子节点
注：以上代码部分的操作，只是针对DOM做了增删改的操作，如果在具体项目业务中使用的话，还是要另外自己编写相应代码，来保存操作的数据，这里不再一一写出。
需要购买阿里云产品和服务的，点击此链接领取优惠券红包，优惠购买哦，领取后一个月内有效： https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=fp9ccf07