Jquery 可拖拽的Ztree(移动,复制)两种选择
2016-12-08 14:54
176 查看
首先要引入ztree依赖的js
只贴关键代码吧,自己把有用的属性全部打印出来了,也加了不少注释。
<link rel="stylesheet" type="text/css" href="<c:url value="/js/common/zTree-v3.5.14/css/zTreeStyle/zTreeStyle.css"/>"/> <script src="<c:url value="/js/common/zTree-v3.5.14/js/jquery.ztree.all-3.5.min.js"/>" <link rel="stylesheet" type="text/css" href="<c:url value="/js/common/bootstrap-2.3.2/css/bootstrap.min.css"/>"/> <script src="<c:url value="/js/common/bootstrap-2.3.2/js/bootstrap.min.js"/>" type="text/javascript"></script> <script src="<c:url value="/js/common/jquery/jquery-1.8.2.min.js"/>" type="text/javascript"></script>
只贴关键代码吧,自己把有用的属性全部打印出来了,也加了不少注释。
$.fn.zTree.init($("#ztree"), { data: { simpleData: { enable: true } }, view:{ selectedMulti :false }, edit: { //此属性添加后,树才可以被拖拽 enable: true, showRemoveBtn: false, showRenameBtn: false, drag: { isCopy: true, isMove: true, prev: true, next: true, inner: true } }, callback: { onClick: function(event, treeId, treeNode, clickFlag) { switch (treeNode.gradeType) { case "db": clickCatgryNode(treeNode.id); break; case "c": clickCatgryNode(treeNode.id); break; case "t": clickTabNode(treeNode.id,false); break; default: break; } }, beforeDrag: function(treeId, treeNodes){ console.log("开启拖拽"); return true; }, beforeDrop: function(treeId, treeNodes, targetNode, moveType, isCopy){ console.log("可以拖拽"); //console.log(treeId); //console.log(treeNodes); console.log(treeNodes); //console.log(targetNode); console.log("【源节点】节点id:"+treeNodes[0].id+" 父节点id:"+treeNodes[0].pId+" 级层:"+treeNodes[0].level+" 名称:"+treeNodes[0].name); //如果拖拽的是目录 if(treeNodes[0].isParent){ $.each(treeNodes[0].children,function(i,treeNode){ console.log("【源节点】子节点"+i+":"+treeNode.id+" 父节点id:"+treeNode.pId+" 级层:"+treeNode.level+" 名称:"+treeNode.name); }); } console.log("【目标节点】 节点id:"+targetNode.id+" 父节点id:"+targetNode.pId+" 级层:"+targetNode.level+" 名称:"+targetNode.name); //console.log("treeId:"+treeId+"--treeNodes:"+treeNodes+"--targetNode:"+targetNode+"--moveType:"+moveType+"--isCopy:"+isCopy); //库名不允许拖拽 if(treeNodes[0].level==0){ alert("不允许拖拽库节点"); return false; } //不允许拖拽到表节点下(如果树状图中有空目录,那还是需要在后台进行校验该节点是否是表节点) if(!targetNode.isParent){ alert("不允许拖拽任何节点到表节点下"); return false; } return true; }, beforeDragOpen: function(){ console.log("自动展开目录"); return true; }, onDrag: function(){ console.log("拖拽中"); return true; }, onDrop: function(event, treeId, treeNodes, targetNode, moveType, isCopy){ console.log("拖拽完毕"); //console.log(treeId); //console.log(treeNodes); //console.log(targetNode); console.log("【源节点】节点id:"+treeNodes[0].id+" 父节点id:"+treeNodes[0].pId+" 级层:"+treeNodes[0].level+" 名称:"+treeNodes[0].name); //如果拖拽的是目录 if(treeNodes[0].isParent){ $.each(treeNodes[0].children,function(i,treeNode){ console.log("【源节点】子节点"+i+":"+treeNode.id+" 父节点id:"+treeNode.pId+" 级层:"+treeNode.level+" 名称:"+treeNode.name); }); } console.log("【目标节点】 节点id:"+targetNode.id+" 父节点id:"+targetNode.pId+" 级层:"+targetNode.level+" 名称:"+targetNode.name); //console.log("event:"+event+"--treeId:"+treeId+"--treeNodes:"+treeNodes+"--targetNode:"+targetNode+"--moveType:"+moveType+"--isCopy:"+isCopy); return true; }, onExpand: function(){ console.log("获得被展开的节点信息"); return true; } } }, zNodes);
相关文章推荐
- JQuery实现表格隔行换色,鼠标移动变色,点击选择变色
- Excel(13)-数据选择、移动、复制粘贴的技巧
- jQuery案例_@注册时选择阅读条款_@左右移动
- jquery禁用右键、文本选择功能、复制按键的实现
- jquery禁用右键、文本选择功能、复制按键的实现
- 纯JS控制DIV选择范围移动与复制
- jquery禁用右键、文本选择功能、复制按键的实现
- jquery禁用右键、文本选择功能、复制按键的实现
- [置顶] 下拉列表选择移动组件(jquery)
- jquery禁用右键、文本选择功能、复制按键的实现
- jquery之设置元素内容(移动和复制元素,使用append(),appendTo()方法)
- jquery 实现 鼠标拖拽元素复制并写入效果
- 基于jquery实现的鼠标拖拽元素复制并写入效果
- jQuery实现 注册时选择阅读条款 左右移动
- jQuery移动和复制dom节点实用DOM操作案例
- vmware server2.02 虚拟机复制后无法上网&移植后的虚拟机第一次开机时如何操作(选择[复制],还是[移动])
- 基于jQuery的可拖拽选择
- 两种方法使用jquery实现左右移动效果(包含each遍历方式)
- 下拉列表选择移动组件(jquery)
- jQuery移动和复制dom节点实现程序