前面的話：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ù)進(jìn)行預(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)網(wǎng)站的支持！
新聞熱點
疑難解答
