jQuery的ztree仿windows文件新建和拖拽功能的实现代码
程序员文章站
2022-04-13 15:40:36
前面的话:ztree 是一个依靠 jquery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 ztree 最大优点。专门适合项目开发,尤其是 树状菜单...
前面的话:ztree 是一个依靠 jquery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 ztree 最大优点。专门适合项目开发,尤其是 树状菜单、树状数据。
ztree官方文档:
想要实现的效果:
需要的功能:
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文件新建和拖拽功能的实现代码,希望对大家有所帮助