前面的话：zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。专门适合项目开发,尤其是 树状菜单、树状数据。
想要实现的效果：
需要的功能：
1：首先实现一颗jQuery的ztree的树形菜单，这个很简单，直接引用官方文档即可
2：点击新建组的按钮，会出现一个input对话框，填写想要新建的名称，在树形菜单上添加了一个父节点菜单。
3：可以把其他父节点里面的子节点元素拖动到刚刚新建的父节点里面。
下面开始撸代码：
1：首先要引入一些必要的文件,可自己在官方文档里面下载。
<!-- 树形菜单 --> <link href="" > <script type="text/javascript" src="" /></script> <script src=""></script>
2：html界面,有新建组的按钮和盛放树形菜单的容器，还有填写文件名的input框以及提交按钮。
<div> <div> <button>新建组</button> </div> <div> <ul></ul> </div> <div> <input type="text"> <button>提交</button> </div> </div>
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('https://www.jb51.net/') + 1); return (localhostPath + projectName); } })
总结