jQuery的ztree仿windows文件新建和拖拽功能的實現(xiàn)代碼

更新時間：2018年12月05日 10:34:37 作者：祈澈菇?jīng)?

zTree 是一個依靠 jQuery 實現(xiàn)的多功能 “樹插件”。優(yōu)異的性能、靈活的配置、多種功能的組合是 zTree 最大優(yōu)點。這篇文章主要介紹了jQuery的ztree仿windows文件新建和拖拽功能的實現(xiàn)代碼,需要的朋友可以參考下

前面的話：zTree 是一個依靠 jQuery 實現(xiàn)的多功能 “樹插件”。優(yōu)異的性能、靈活的配置、多種功能的組合是 zTree 最大優(yōu)點。專門適合項目開發(fā),尤其是樹狀菜單、樹狀數(shù)據(jù)。

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

想要實現(xiàn)的效果：

需要的功能：

1：首先實現(xiàn)一顆jQuery的ztree的樹形菜單，這個很簡單，直接引用官方文檔即可
2：點擊新建組的按鈕，會出現(xiàn)一個input對話框，填寫想要新建的名稱，在樹形菜單上添加了一個父節(jié)點菜單。
3：可以把其他父節(jié)點里面的子節(jié)點元素拖動到剛剛新建的父節(jié)點里面。

下面開始擼代碼：

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樣式是自己對于官方文檔的一些修改，放了一些必要的圖標(biāo)，更加的生動形象。

#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結(jié)構(gòu)設(shè)置功能；

$(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結(jié)構(gòu)設(shè)置
 var setting = {
  check : {
   enable : true,
   chkStyle : "radio",
   radioType : "all"
  },
  async : {// 異步加載數(shù)據(jù)操作
   enable : true,
   url : path() + "/ztree",
   autoParam : [ "id" ],
   type : "get",
   // dataFilter : ajaxDataFilter,//用于對 Ajax 返回數(shù)據(jù)進行預(yù)處理的函數(shù)
   dataType : "json"
  },
  edit : {
   enable : true,
   showRemoveBtn : false,// 設(shè)置是否顯示刪除按鈕
   showRenameBtn : setRenameBtn,// 設(shè)置是否顯示重新命名按鈕
   drag : {
    isCopy : false,
    isMove : true,
    prev : true,
    next : true,
    inner : true
   }
  },
  data : {
   keep : {
    parent : true
   // 保持父節(jié)點的狀態(tài)
   },
   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,
  }
  // 設(shè)置父節(jié)點
  $.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);
 }
})

總結(jié)

以上所述是小編給大家介紹的jQuery的ztree仿windows文件新建和拖拽功能的實現(xiàn)代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: