前面的话：zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。专门适合项目开发,尤其是 树状菜单、树状数据。

ztree官方文档：http://mon/ztree/js/jquery.ztree.all.min.js"></script>

2：html界面,有新建组的按钮和盛放树形菜单的容器，还有填写文件名的input框以及提交按钮。

<div class=""> <div> <button id="add">新建组</button> </div> <div> <ul id="ztree" class="ztree"></ul> </div> <div id="addgroup" style="display: none"> <input type="text" id="group" name="group"> <button id="submit">提交</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('/') + 1); return (localhostPath + projectName); }})

总结

以上所述是小编给大家介绍的jQuery的ztree仿windows文件新建和拖拽功能的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！