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 EasyUI 为Combo,Combobox添加清除值功能的实例
Apr 13 jQuery
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 jQuery
jQuery事件对象的属性和方法详解
Sep 09 jQuery
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 jQuery
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
jQuery替换节点元素的操作方法
Mar 18 jQuery
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 jQuery
layui+jquery支持IE8的表格分页方法
Sep 28 jQuery
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
jquery简易手风琴插件的封装
Oct 13 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上传、管理照片示例
2006/10/09 PHP
浅谈PHP的exec()函数无返回值排查方法(必看)
2017/03/31 PHP
类似GMAIL的Ajax信息反馈显示
2010/02/16 Javascript
各浏览器对document.getElementById等方法的实现差异解析
2013/12/05 Javascript
从QQ网站中提取的纯JS省市区三级联动菜单
2013/12/25 Javascript
jQuery实现可编辑的表格实例讲解(2)
2015/09/17 Javascript
jquery trigger实现联动的方法
2016/02/29 Javascript
jquery easyUI中ajax异步校验用户名
2016/08/19 Javascript
javascript 中的console.log和弹出窗口alert
2016/08/30 Javascript
String字符串截取的四种方式总结
2016/11/28 Javascript
使用Vuex实现一个笔记应用的方法
2018/03/13 Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
2018/05/30 Javascript
video.js 一个页面同时播放多个视频的实例代码
2018/11/27 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
2019/01/21 Javascript
环形加载进度条封装(Vue插件版和原生js版)
2019/12/04 Javascript
解决Antd Table表头加Icon和气泡提示的坑
2020/11/17 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
2020/12/03 Vue.js
python实现爬虫下载美女图片
2015/07/14 Python
详解PyCharm安装MicroPython插件的教程
2019/06/24 Python
浅谈django2.0 ForeignKey参数的变化
2019/08/06 Python
Python 实现使用空值进行赋值 None
2020/03/12 Python
Python中如何添加自定义模块
2020/06/09 Python
浅析Python中字符串的intern机制
2020/10/03 Python
CSS3实现可关闭的下拉手风琴菜单效果
2015/08/31 HTML / CSS
小学生期末自我鉴定
2014/01/19 职场文书
自主招生自荐信指南
2014/02/04 职场文书
新品发布会主持词
2014/04/02 职场文书
机电一体化专业求职信
2014/07/22 职场文书
人大调研汇报材料
2014/08/14 职场文书
2015财务年终工作总结范文
2015/05/22 职场文书
2015教师个人年度工作总结
2015/10/23 职场文书
2016年五一劳动节专题校园广播稿
2015/12/17 职场文书
2019奶茶店创业计划书范本!
2019/07/15 职场文书
MySQL开启事务的方式
2021/06/26 MySQL
Java Dubbo框架知识点梳理
2021/06/26 Java/Android
详解CSS中的特指度和层叠问题
2021/07/15 HTML / CSS