欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-13 15:40:36
前面的话:ztree 是一个依靠 jquery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 ztree 最大优点。专门适合项目开发,尤其是 树状菜单...

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

ztree官方文档:

想要实现的效果:

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文件新建和拖拽功能的实现代码,希望对大家有所帮助