`
hopechart
  • 浏览: 5285 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

ztree仅并列同级进行推拽(同一个组织下不同部门排序拖拽)

ztree 
阅读更多 
实现仅同一个组织下不同部门排序拖拽是判断当前拖拽的节点pId和目标节点的pId是否相等，否则禁止拖拽，
拖拽的重点方法是以下两个：callback: {
          beforeDrag: beforeDrag,
          beforeDrop: beforeDrop｝
inner: false 拖拽到目标节点时，设置是不允许成为目标节点的子节点
edit: {drag: { prev: true, next: true,inner: false}}
function beforeDrag(treeId, treeNodes) {
			for (var i=0,l=treeNodes.length; i<l; i++) {
				   dragId = treeNodes[i].pId;
				if (treeNodes[i].drag === false) {
					return false;
				}
			}
			return true;
		}
		function beforeDrop(treeId, treeNodes, targetNode, moveType) {
				  if(targetNode.pId == dragId){
				    return true;
				  }else{
			        return false;
			      }
		}

<!DOCTYPE html>
<HTML>
<HEAD>
	<TITLE> ztree仅并列同级进行推拽(同一个组织下不同部门排序拖拽)</TITLE>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" href="../../../css/demo.css" type="text/css">
	<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
	<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="../../../js/jquery.ztree.core-3.1.js"></script>
    <script type="text/javascript" src="../../../js/jquery.ztree.excheck-3.1.js"></script>
	<script type="text/javascript" src="../../../js/jquery.ztree.exedit-3.1.js"></script>
	<SCRIPT type="text/javascript">
		<!--
		var dragId;
		var setting = {
			view: {
				addHoverDom: addHoverDom,
				removeHoverDom: removeHoverDom,
				selectedMulti: false
			},
			edit: {
				enable: true,
				showRemoveBtn: setRemoveBtn,
				drag: {
			          prev: true,
			          next: true,
			          inner: false
		        },
				editNameSelectAll: true
			},
			data: {
				simpleData: {
					enable: true
				}
			},
			callback: {
				beforeDrag: beforeDrag,
				beforeEditName: beforeEditName,
				beforeRemove: beforeRemove,
				beforeRename: beforeRename,
				onRemove: onRemove,
				onRename: onRename,
				beforeDrag: beforeDrag,
				beforeDrop: beforeDrop
			}
		};
 
		var zNodes =[
			{ id:1, pId:0, name:"总公司", open:true, iconSkin:"pIcon01"},
			{ id:2, pId:1, name:"一分公司", open:true, iconSkin:"pIcon02"},
			{ id:3, pId:2, name:"总经办", open:true, iconSkin:"pIcon02"},
			{ id:4, pId:3, name:"总经理", open:true, iconSkin:"pIcon01"},
			{ id:5, pId:4, name:"研发经理", open:true, iconSkin:"pIcon01"},
			{ id:6, pId:5, name:"研发部", iconSkin:"icon01"},
			{ id:7, pId:3, name:"销售经理"},
			{ id:8, pId:3, name:"售后经理"},
			{ id:9, pId:1, name:"二分公司",open:true, iconSkin:"icon02"}
		];
 
		var log, className = "dark";
		function beforeDrag(treeId, treeNodes) {
			return false;
		}
		function beforeEditName(treeId, treeNode) {
			className = (className === "dark" ? "":"dark");
			showLog("[ "+getTime()+" beforeEditName ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			zTree.selectNode(treeNode);
			return true;
		}
		function beforeRemove(treeId, treeNode) {
			className = (className === "dark" ? "":"dark");
			showLog("[ "+getTime()+" beforeRemove ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			zTree.selectNode(treeNode);
			return confirm("确认删除 节点 -- " + treeNode.name + " 吗？");
		}
		function onRemove(e, treeId, treeNode) {
			showLog("[ "+getTime()+" onRemove ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
		}
		function beforeRename(treeId, treeNode, newName) {
			className = (className === "dark" ? "":"dark");
			showLog("[ "+getTime()+" beforeRename ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
			if (newName.length == 0) {
				alert("节点名称不能为空.");
				var zTree = $.fn.zTree.getZTreeObj("treeDemo");
				setTimeout(function(){zTree.editName(treeNode)}, 10);
				return false;
			}
			return true;
		}
		function onRename(e, treeId, treeNode) {
			showLog("[ "+getTime()+" onRename ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
		}
		function showLog(str) {
			if (!log) log = $("#log");
			log.append("<li class='"+className+"'>"+str+"</li>");
			if(log.children("li").length > 8) {
				log.get(0).removeChild(log.children("li")[0]);
			}
		}
		function getTime() {
			var now= new Date(),
			h=now.getHours(),
			m=now.getMinutes(),
			s=now.getSeconds(),
			ms=now.getMilliseconds();
			return (h+":"+m+":"+s+ " " +ms);
		}
 
		var newCount = 1;
		function addHoverDom(treeId, treeNode) {
			var sObj = $("#" + treeNode.tId + "_span");
			if (treeNode.editNameFlag || $("#addBtn_"+treeNode.id).length>0) return;
			var addStr = "<button type='button' class='add' id='addBtn_" + treeNode.id
				+ "' title='add node' onfocus='this.blur();'></button>";
			sObj.append(addStr);
			var btn = $("#addBtn_"+treeNode.id);
			if (btn) btn.bind("click", function(){
				var zTree = $.fn.zTree.getZTreeObj("treeDemo");
				zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, name:"new node" + (newCount++)});
				return false;
			});
		}
		function setRemoveBtn(treeId, treeNode) {
		    if(treeNode.level == 0)
	           return false;
            else
               return true;
               
        }
       
		function removeHoverDom(treeId, treeNode) {
			$("#addBtn_"+treeNode.id).unbind().remove();
		};
		
		function beforeDrag(treeId, treeNodes) {
			for (var i=0,l=treeNodes.length; i<l; i++) {
				   dragId = treeNodes[i].pId;
				if (treeNodes[i].drag === false) {
					return false;
				}
			}
			return true;
		}
		function beforeDrop(treeId, treeNodes, targetNode, moveType) {
				  if(targetNode.pId == dragId){
				    return true;
				  }else{
			        return false;
			      }
		}
		
		function selectAll() {
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			zTree.setting.edit.editNameSelectAll =  $("#selectAll").attr("checked");
		};
		$(document).ready(function(){
			$.fn.zTree.init($("#treeDemo"), setting, zNodes);
			$("#selectAll").bind("click", selectAll);
		});
		-->
	</SCRIPT>
<style type="text/css">
.ztree li button.pIcon01_ico_open{margin-right:2px; background: url(../../../css/zTreeStyle/img/diy/1_open.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
.ztree li button.pIcon01_ico_close{margin-right:2px; background: url(../../../css/zTreeStyle/img/diy/1_close.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
.ztree li button.pIcon02_ico_open, .ztree li button.pIcon02_ico_close{margin-right:2px; background: url(../../../css/zTreeStyle/img/diy/2.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
.ztree li button.icon01_ico_docu{margin-right:2px; background: url(../../../css/zTreeStyle/img/diy/3.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
.ztree li button.icon02_ico_docu{margin-right:2px; background: url(../../../css/zTreeStyle/img/diy/4.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
.ztree li button.icon03_ico_docu{margin-right:2px; background: url(../../../css/zTreeStyle/img/diy/5.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
.ztree li button.icon04_ico_docu{margin-right:2px; background: url(../../../css/zTreeStyle/img/diy/6.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
.ztree li button.icon05_ico_docu{margin-right:2px; background: url(../../../css/zTreeStyle/img/diy/7.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
.ztree li button.icon06_ico_docu{margin-right:2px; background: url(../../../css/zTreeStyle/img/diy/8.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
.ztree li button.add {margin-left:2px; margin-right: -1px; background-position:-144px 0; vertical-align:top; *vertical-align:middle}
</style>
 </HEAD>

<BODY>
<div style="height:500px;">
	<ul id="treeDemo" class="ztree"></ul>
</div>
</BODY>
</HTML>

 

0
顶
1
踩
分享到：
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ztree实现公司组织结构树状显示

    在IT行业中，构建一个公司组织结构的树状显示是一种常见的需求，这有助于管理层直观地查看和管理员工的层级关系。ZTree是一款强大的JavaScript组件，专为实现这种树形数据交互而设计。本项目利用ZTree结合SSM...

    ztree官网 ztree官网

    ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网...

    java jquery Ztree 机构人员树示例

    在IT行业中，构建一个高效的组织结构和人员管理系统是至关重要的，而"java jquery Ztree 机构人员树示例"就是一种实现方式。这个示例利用了Java后端技术和前端jQuery库ZTree，来创建一个可交互的、可视化展示机构与...

    ztree全套的增删改查实例,包括编辑排序子节点操作，源码仅供参考

    在这个"ztree全套的增删改查实例"中，我们可以深入学习如何在实际项目中应用ZTree进行数据的管理。 首先，让我们了解ZTree的基本结构。ZTree的数据以JSON格式存储，每个节点包含id、pId（父节点id）、name等属性，...

    zTree zTree zTree

    zTree是一款基于jQuery的强大的树形插件，它在网页中广泛用于构建各种类型的树状结构，如文件目录、组织架构、菜单等。zTree以其轻量级、高性能和丰富的功能，深受开发者喜爱。以下是对zTree核心特性和使用方法的...

    不同的jqueryztree

    jQuery ZTree 是一个基于 jQuery 的强大且功能丰富的树状视图组件。它被广泛应用于网页中展示层次结构的数据，如文件目录、组织架构、菜单导航等。在"不同的jqueryztree"这个主题中，我们将深入探讨ZTree的多样性和...

    基于ztree开发的下拉树控件ztree-select

    ztree是一个广泛使用的JavaScript树形插件，而ztree-select则是其在下拉选择器场景中的延伸应用，尤其适用于需要展示多级分类数据的Web应用。 ztree的基础功能包括但不限于： 1. **层级展示**：ztree可以清晰地...

    zTree帮助文档_ztree_

    zTree是一款基于JavaScript的树形插件，广泛应用于网页中展示层级结构的数据，例如组织架构、文件目录、菜单系统等。它以其轻量级、高性能、易于扩展的特点深受开发者喜爱。zTree提供了丰富的API接口和配置选项，...

    一个简单的ztree小例子

    ZTree是一款基于jQuery的树形插件，常用于构建数据展示、树形菜单...这个简单的例子中的代码应该包含了ZTree的基本配置和数据加载，对于初学者来说，这是一个很好的起点，你可以根据实际需求在此基础上进行扩展和优化。

    ztree脚本、ztree下载

    4. **ztree的CHM教程**：`.chm`文件是Windows的帮助文件格式，`zTreeAPI v2.5.chm`则提供了另一种形式的API参考，便于在Windows环境下离线查看。CHM文件具有良好的索引和搜索功能，使得开发者能够快速定位到所需的...

    异步&同步加载树节点----zTree(一)

    而异步加载则不同，它允许浏览器在进行耗时操作的同时继续处理其他任务，提高用户体验。 zTree提供了同步和异步两种方式来加载树节点，这主要体现在数据加载策略上。对于小型数据集，同步加载可能是合适的，因为其...

    zTree-zTree_v3-master.zip_ztree_多功能插件

    "zTree_v3-master.zip"中的"ztree"指的是这个插件的最新版本，即v3版本，而“多功能插件”的标签进一步强调了zTree不仅仅是一个单一功能的工具，它具备广泛的适用性和强大的扩展性。 zTree的核心功能在于实现树形...

    ztree实现左右两棵树的节点移动

    首先，ZTree是基于jQuery的插件，它的核心功能包括节点的增删改查、拖拽排序、多选、权限控制等。在实际应用中，左右两棵树的布局通常用于展示具有关联关系的数据，例如权限管理、目录结构等场景。在"ztree实现左右...

    bootstrap风格ztree适应移动端

    Bootstrap风格的ZTree是将流行的前端框架Bootstrap与ZTree（一个强大的JavaScript树插件）相结合，以实现更适应移动端展示和交互的树形菜单。在移动端应用中，它提供了优化的布局和触摸友好的交互方式，使用户在手机...

    ztree官网参考文档及demo

    zTree是一个基于jQuery的树形插件，它能够快速构建出各种类型的树形结构，如文件目录树、组织架构树等。zTree提供了多种数据格式支持，包括JSON、XML等，使得数据处理更加便捷。同时，zTree具备强大的事件机制和API...

    架构树zTree

    5. 拖拽排序：允许用户通过拖放操作调整节点的顺序，或者移动节点到其他父节点下。 6. 自定义图标：每个节点都可以设置自定义图标，以更直观地表示节点的状态或类型。 7. 数据绑定：支持JSON数据格式，方便与...

    zTree-zTree_v3.5.17

    - **拖拽排序**：利用zTree的拖拽功能，实现节点的拖放排序。 - **多选模式**：开启多选模式，支持批量选择和操作节点。 6. **注意事项** - **兼容性**：zTree对浏览器有一定要求，确保项目所支持的浏览器范围...

    ztree_bootstrap样式风格

    6. **测试与优化**：完成初步集成后，务必进行多设备、多浏览器的测试，以确保在不同环境下`ZTree`与`Bootstrap`的兼容性和表现。 通过以上步骤，你可以成功地将`ZTree`与`Bootstrap`风格融合在一起，创建出既美观...

    ztree实现部门增删改查

    ZTree可以通过`addNode`方法动态添加节点，这个过程通常伴随着与后台服务器的交互，将新增的部门信息发送到服务器进行存储。前端展示新部门时，可以通过异步加载的方式，获取并渲染新的数据。 "删"指的是删除部门。...

    easyui+ztree后台管理系统模板

    而ZTree则是一个强大的树形插件，适用于展示和操作树状数据结构，常用于菜单、组织结构或者文件目录的展示。 在"easyui+ztree后台管理系统模板"中，我们可以看到以下几个关键知识点： 1. **EasyUI框架**：EasyUI...

Magicbox
Global site tag (gtag.js) - Google Analytics