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

228 阅读 0 评论 151 点赞

我是靠谱客的博主美丽小刺猬，这篇文章主要介绍jQuery的ztree仿windows文件新建和拖拽功能的实现代码，现在分享给大家，希望可以做个参考。

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

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

想要实现的效果：

需要的功能：

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

下面开始撸代码：

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

复制代码

1
2
3
4
<!-- 树形菜单 -->
<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框以及提交按钮。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
<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样式是自己对于官方文档的一些修改，放了一些必要的图标，更加的生动形象。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
#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);
 }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
$(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);
 }
})