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


Posted in jQuery onDecember 05, 2018

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

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

想要实现的效果:

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

需要的功能:

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

jQuery 相关文章推荐
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 jQuery
JQuery实现定时刷新功能代码
May 09 jQuery
jQuery鼠标移动图片上实现放大效果
Jun 25 jQuery
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
jQuery remove()过滤被删除的元素(推荐)
Jul 18 jQuery
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 jQuery
jQuery中each方法的使用详解
Mar 18 jQuery
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 jQuery
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
js和jquery判断数据类型的4种方法总结
Aug 28 jQuery
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 #jQuery
jQuery利用FormData上传文件实现批量上传
Dec 04 #jQuery
利用jquery和BootStrap实现动态滚动条效果
Dec 03 #jQuery
jQuery-ui插件sortable实现自由拖动排序
Dec 01 #jQuery
jquery拖拽自动排序插件使用方法详解
Jul 20 #jQuery
jQuery实现网页拼图游戏
Apr 22 #jQuery
基于jquery实现九宫格拼图小游戏
Nov 30 #jQuery
You might like
PHP文件操作实现代码分享
2011/09/01 PHP
php中http_build_query 的一个问题
2012/03/25 PHP
PHP对象Object的概念 介绍
2012/06/14 PHP
PHP 文件编程综合案例-文件上传的实现
2013/07/03 PHP
javascript数组与php数组的地址传递及值传递用法实例
2015/01/22 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
jQuery代码优化之基本事件
2011/11/01 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
2013/06/26 Javascript
JQuery实现表格中相同单元格合并示例代码
2013/06/26 Javascript
JSON无限折叠菜单编写实例
2013/12/16 Javascript
控制文字内容的显示与隐藏示例
2014/06/11 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
2014/09/03 Javascript
JavaScript实现生成GUID(全局统一标识符)
2014/09/05 Javascript
详解JS函数重载
2014/12/04 Javascript
jQuery插件bxSlider实现响应式焦点图
2015/04/12 Javascript
jQuery结合CSS制作漂亮的select下拉菜单
2015/05/03 Javascript
深入浅析JavaScript中的constructor
2016/04/19 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
2016/08/11 Javascript
总结Javascript中的隐式类型转换
2016/08/24 Javascript
Vue2.0父组件与子组件之间的事件发射与接收实例代码
2017/09/19 Javascript
在 React、Vue项目中使用SVG的方法
2018/02/09 Javascript
javascript随机变色实例代码
2019/10/15 Javascript
nodeJS与MySQL实现分页数据以及倒序数据
2020/06/05 NodeJs
Python要如何实现列表排序的几种方法
2020/02/21 Python
美国著名童装品牌:OshKosh B’gosh
2016/08/05 全球购物
北美个性化礼品商店:Things Remembered
2018/06/12 全球购物
施华洛世奇西班牙官网:SWAROVSKI西班牙
2019/06/06 全球购物
什么造成了Java里面的异常
2016/04/24 面试题
毕业生就业推荐信范文
2013/12/01 职场文书
见习期自我鉴定
2014/01/31 职场文书
2014年五四青年节活动方案
2014/03/29 职场文书
计算机网络专业自荐书
2014/06/09 职场文书
特此通知格式
2015/04/27 职场文书
《角的度量》教学反思
2016/02/18 职场文书
Python&Matlab实现樱花的绘制
2022/04/07 Python
Hive常用日期格式转换语法
2022/06/25 数据库