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

2019-11-19 12:24:20

字体：大中小

来源：转载

供稿：网友

前面的话：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文件新建和拖拽功能的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持！

上一篇：详解angularjs4部署文件过大解决过程

下一篇：关于RxJS Subject的学习笔记