jQuery的ztree仿windows文件新建和拖拽功能的实现代码

更新时间：2020-08-07 18:18:01 作者：startmvc

前面的话：zTree是一个依靠jQuery实现的多功能“树插件”。优异的性能、灵活的配置、多种

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

ztree官方文档：http://www.treejs.cn/v3/api.php

想要实现的效果：

需要的功能：

1：首先实现一颗jQuery的ztree的树形菜单，这个很简单，直接引用官方文档即可 2：点击新建组的按钮，会出现一个input对话框，填写想要新建的名称，在树形菜单上添加了一个父节点菜单。 3：可以把其他父节点里面的子节点元素拖动到刚刚新建的父节点里面。

下面开始撸代码：

1：首先要引入一些必要的文件,可自己在官方文档里面下载。


<!-- 树形菜单 -->
<link rel="stylesheet" href="../../common/ztree/css/zTreeStyle/zTreeStyle.css" rel="external nofollow" >
<script type="text/javascript" src="../../js/jquery-1.9.1.js" /></script> 
<script src="../../common/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文件新建和拖拽功能的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！