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实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 jQuery
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 jQuery
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 jQuery
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
jquery中done和then的区别(详解)
Dec 19 jQuery
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 jQuery
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 jQuery
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
浅谈JS和jQuery的区别
Mar 27 jQuery
JQuery常用选择器功能与用法实例分析
Dec 23 jQuery
详解jQuery的核心函数和事件处理
Feb 18 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
smarty的保留变量问题
2008/10/23 PHP
php下载excel无法打开的解决方法
2013/12/24 PHP
浅谈PHP的exec()函数无返回值排查方法(必看)
2017/03/31 PHP
jQuery数据显示插件整合实现代码
2011/10/24 Javascript
javascript生成随机大小写字母的方法
2014/02/20 Javascript
jQuery移除元素自动解绑事件实现思路及代码
2014/05/31 Javascript
jquery实现人性化的有选择性禁用鼠标右键
2014/06/30 Javascript
javascript使用window.open提示“已经计划系统关机”的原因
2014/08/15 Javascript
js实现点击向下展开的下拉菜单效果代码
2015/09/01 Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
2015/10/08 Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
2016/05/20 Javascript
JavaScript中removeChild 方法开发示例代码
2016/08/15 Javascript
Javascript实现跨域后台设置拦截的方法详解
2017/08/04 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
2018/12/16 Javascript
vuex实现数据状态持久化
2019/11/11 Javascript
Vue设置长时间未操作登录自动到期返回登录页
2020/01/22 Javascript
vue 修改 data 数据问题并实时显示操作
2020/09/07 Javascript
Vue切换Tab动态渲染组件的操作
2020/09/21 Javascript
[47:42]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[48:31]完美世界DOTA2联赛PWL S3 DLG vs Phoenix 第二场 12.17
2020/12/19 DOTA
Python数据类型详解(四)字典:dict
2016/05/12 Python
Python3 使用cookiejar管理cookie的方法
2018/12/28 Python
分析经典Python开发工程师面试题
2019/04/08 Python
Python 抓取微信公众号账号信息的方法
2019/06/14 Python
pytorch AvgPool2d函数使用详解
2020/01/03 Python
完美解决pycharm导入自己写的py文件爆红问题
2020/02/12 Python
Django 允许局域网中的机器访问你的主机操作
2020/05/13 Python
简述 Python 的类和对象
2020/08/21 Python
python在linux环境下安装skimage的示例代码
2020/10/14 Python
matplotlib bar()实现百分比堆积柱状图
2021/02/24 Python
美国办公用品折扣网站:Shoplet.com
2019/11/24 全球购物
员工培训邀请函
2014/01/11 职场文书
2014年元旦促销活动方案
2014/02/22 职场文书
参观邀请函范文
2015/02/02 职场文书
Java GUI编程菜单组件实例详解
2022/04/07 Java/Android
vue-cli3.x配置全局的scss的时候报错问题及解决
2022/04/30 Vue.js