前面的话：zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。专门适合项目开发,尤其是 树状菜单、树状数据。
ztree官方文档：http://www.treejs.cn/v3/api.php
想要实现的效果：
需要的功能：
1：首先实现一颗jQuery的ztree的树形菜单，这个很简单，直接引用官方文档即可
2：点击新建组的按钮，会出现一个input对话框，填写想要新建的名称，在树形菜单上添加了一个父节点菜单。
3：可以把其他父节点里面的子节点元素拖动到刚刚新建的父节点里面。
下面开始撸代码：
1：首先要引入一些必要的文件,可自己在官方文档里面下载。
2：html界面,有新建组的按钮和盛放树形菜单的容器，还有填写文件名的input框以及提交按钮。
3：css，这里的css样式是自己对于官方文档的一些修改，放了一些必要的图标，更加的生动形象。
#add{
width:80px;
height:30px;
background:#2299ee;
color:#ffffff;
border:none;
margin-top:10px;
margin-bottom:10px;
}
.ztree li span.button.icon01_ico_close {
margin-right: 2px;
background: url(../../images/ztree/close.png) no-repeat scroll 0 0 transparent;
vertical-align: top;
*vertical-align: middle
}
.ztree li span.button.icon01_ico_open {
margin-right: 2px;
background: url(../../images/ztree/open.png) no-repeat scroll 0 0 transparent;
vertical-align: top;
*vertical-align: middle
}
.ztree li span.button.icon02_ico_docu {
margin-right: 2px;
background: url(../../images/ztree/woman.png) no-repeat scroll 0 0 transparent;
vertical-align: top;
*vertical-align: middle
}
.ztree li span.button.icon03_ico_docu {
margin-right: 2px;
background: url(../../images/ztree/man.png) no-repeat scroll 0 0 transparent;
vertical-align: top;
*vertical-align: middle
}
4：重点在于js，主要分为初始化ztree功能；添加分组功能；ztree结构设置功能；
$(function() {
var zTreeObj;
// 初始化ztree
initTree();
function initTree() {
$.get(path() + "/ztree/init", function(data) {
for ( var i in data) {
if (data[i].token == "3")
data[i].nocheck = true;
}
zTreeObj = $.fn.zTree.init($("#ztree"), setting, data);
});
}
// 点击显示div
$("#add").click(function() {
$("#addgroup").show();
})
// 添加分组
$("#submit").click(function() {
$.ajax({
url : path() + '/ztree/group/' + $("#group").val(),
type : 'post',
success : function(data) {
$("#addgroup").hide();
// 重新加载
initTree();
},
error : function(data) {
alert("添加分组失败！！")
}
});
})
// ztree结构设置
var setting = {
check : {
enable : true,
chkStyle : "radio",
radioType : "all"
},
async : {// 异步加载数据操作
enable : true,
url : path() + "/ztree",
autoParam : [ "id" ],
type : "get",
// dataFilter : ajaxDataFilter,//用于对 Ajax 返回数据进行预处理的函数
dataType : "json"
},
edit : {
enable : true,
showRemoveBtn : false,// 设置是否显示删除按钮
showRenameBtn : setRenameBtn,// 设置是否显示重新命名按钮
drag : {
isCopy : false,
isMove : true,
prev : true,
next : true,
inner : true
}
},
data : {
keep : {
parent : true
// 保持父节点的状态
},
simpleData : {
enable : true,
idKey : "id",
pIdKey : "pId"
}
},
callback : {
beforeDrag : beforeDrag,
beforeDrop : zTreeBeforeDrop,
onDrop : onDrop,
onRename : zTreeOnRename,
}
};
function setRenameBtn(treeId, treeNode) {
return treeNode.isParent;
}
function zTreeOnRename(event, treeId, treeNode, isCancel) {
if (treeNode.name == '')
return;
var params = {
id : treeNode.id,
name : treeNode.name,
}
$.ajax({
url : path() + '/ztree/group',
contentType : 'application/json',
type : 'post',
data : JSON.stringify(params),
error : function(data) {
alert("操作失败！！")
}
});
}
function beforeDrag(treeId, treeNodes) {
for (var i = 0, l = treeNodes.length; i < l; i++) {
if (treeNodes[i].token == "3") {
return false;
}
}
return true;
}
function zTreeBeforeDrop(treeId, treeNodes, targetNode, moveType) {
if (targetNode.token != '3') {
return false;
}
return true;
}
function onDrop(event, treeId, treeNodes, targetNode, moveType, isCopy) {
if (moveType == null)
return;
var params = {
id : treeNodes[0].id,
pId : targetNode.id,
token : moveType,
}
// 设置父节点
$.ajax({
url : path() + '/ztree',
contentType : 'application/json',
type : 'put',
data : JSON.stringify(params),
error : function(data) {
alert("操作失败！！")
}
});
}
// 获取项目路径
function path() {
var currentPath = window.document.location.href;
var pathName = window.document.location.pathname;
var pos = currentPath.indexOf(pathName);
var localhostPath = currentPath.substring(0, pos);
var projectName = pathName.substring(0,
pathName.substr(1).indexOf('/') + 1);
return (localhostPath + projectName);
}
})
好了，到此为止，一个可以添加新的节点和拖拽树形菜单的功能就实现了。
原文作者：祈澈姑娘；技术博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，爱编程，爱运营，爱折腾。 坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。