`

zTree 回撤操作

    博客分类：
  • html
 
阅读更多

Command.js

Command={
	 //cmdQueue:new Array(),
	 createAddCommand:function(option){
	 		var command={};
	 		
	 		$.extend(command,option)
	 		command.undo=function(){
					zTree.removeNode(this.zTree.getNodeByTId(this.node));
					Command.updateNodes(this.nodeObj.tId,null);
	 		};
	 		return command;
	 },
	 createModifyCommand:function(option){
	 		var command={};
	 		$.extend(command,option)
	 		command.undo=function(){
	 			var curNode=this.zTree.getNodeByTId(this.node);
	 			curNode.name=this.beforeValue;
	 			this.zTree.updateNode(curNode);
	 		};
	 		return command;
	 },
	 createRemoveCommand:function(option){
	 		var command={};
	 		$.extend(command,option)
	 		command.undo=function(){
	 			 var tmpNode=Command.addNodes(this,this.zTree.getNodeByTId(this.parentNode)?this.zTree.getNodeByTId(this.parentNode):null,this.nodeObj);
	 			//Command.print();
	 			if(this.preNode){
	 				tmpNode=this.zTree.moveNode(this.zTree.getNodeByTId(this.preNode),tmpNode,"next");
	 			}else  if(this.nextNode){
	 				tmpNode=this.zTree.moveNode(this.zTree.getNodeByTId(this.nextNode),tmpNode,"prev");
	 			}
	 			
	 		};
	 		return command;
	 },
	 updateNodes:function(oldNode,newNode){
	 			console.info("updateNodes");
				$.each(window.cmdQueue,function(k,v){
					if(v.preNode==oldNode){
						v.preNode=newNode;
					}
					if(v.nextNode==oldNode){
						v.nextNode=newNode;
					}
					if(v.parentNode==oldNode){
						v.parentNode=newNode;
					}if(v.node==oldNode){
						v.node=newNode;
					}
				});
		},
		addNodes:function(cmd,truefather,appendNode){
			var appendNodeJson=cmd.zTree.transformToArray(appendNode)[0];
			var appendNodeJsonFather=$.extend({},{"id":appendNodeJson.id,"name":appendNodeJson.name});
			var appendNodeFatherTreeNode=cmd.zTree.transformTozTreeNodes(appendNodeJsonFather);
			appendNodeFatherTreeNode=cmd.zTree.addNodes(truefather,appendNodeFatherTreeNode)[0];
			Command.updateNodes(appendNode.tId,appendNodeFatherTreeNode.tId);
			if(appendNode.children){
				$.each(appendNode.children,function(k,v){
					Command.addNodes(cmd,appendNodeFatherTreeNode,v);
				});
			}
			return appendNodeFatherTreeNode;
		},
		print:function(){
			console.info("print");
			$.each(window.cmdQueue,function(k,v){
				console.info(v);
			});
		},
		getOptions:function(node){
 					var option={};
 					option.nodeObj=node;
 					option.zTree=zTree;
 					option.node=node.tId;
 					option.parentNode=node.parentTId;
 					
 					if(node.getPreNode()){
 						option.preNode=node.getPreNode().tId;
 					}
 					if(node.getNextNode()){
 						option.nextNode=node.getNextNode().tId;
 					}
 					
 					return option;
 		}
};

window.cmdQueue=new Array();

 html

 <html>
 		<head>
 			<script src="jquery-1.9.0.min.js" type="text/javascript"></script>
 			<script src="js/jquery.ztree.all-3.5.js" type="text/javascript"></script>
 			<script src="command.js" type="text/javascript"></script>
 			
 			<link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css">
 			<link rel="stylesheet" href="css/demo.css">
 			<style type="text/css">
 				div#rMenu{position:absolute;display:none;top:0;background-color:#555,text-align:left;padding:2px;}
 				ul{
 					 margin:0;
 					 padding:0;
 				}
 				div#rMenu ul li{
 					margin:1px 0;
 					padding:0 5px;
 					cursor:pointer;
 					list-style:none outside none;
 					background-color:#DFDFDF;	
 				}
 			</style>
 			<script>
 				var setting={
 					callback:{
 						onRightClick:onRightClick,
 						onMouseDown:onLeftClick,
 						onRename:zTreeOnRename,
 						
 					},
 					edit:{
 						enable:true,
 						showRemoveBtn:false,
 						showRenameBtn:false
 					}
 				}	
 				var zNodes=[
 					{id:1,name:"无右键菜单 1",open:true,noR:false,children:[
 							{id:11,name:"节点 1-1",noR:false},
 							{id:12,name:"节点 1-2",noR:false}
 						]
 					},
 					{id:2,name:"右键操作 2",open:true,children:[
 							{id:21,name:"节点 2-1"},
 							{id:22,name:"节点 2-2"},
 							{id:23,name:"节点 2-3"},
 							{id:24,name:"节点 2-4"}
 						]
 					},
 					{id:3,name:"无右键菜单 3",open:true,children:[
 							{id:31,name:"节点 3-1"},
 							{id:32,name:"节点 3-2"},
 							{id:33,name:"节点 3-3"},
 							{id:34,name:"节点 3-4"},
 						]
 					}
 				];
 				//temp
 				var zNodesTmp=[
 				
 				];
 				function onRightClick(event,treeId,treeNode){
 					///非节点上右击
 					if(!treeNode){
 						//console.log(event.target.tagName);
 						zTree.cancelSelectedNode();
 						showRMenu('root',event.clientX,event.clientY);
 						
 					}else if(treeNode && !treeNode.noR){//节点，可右键的
 							if(zTree.getSelectedNodes().length<=1){
 								zTree.selectNode(treeNode);
 							} 							
 							showRMenu('node',event.clientX,event.clientY);
 					}
 				}
 				function onLeftClick(event,treeId,treeNode){
 					//console.info("click");
 					if(!treeNode){
 						zTree.cancelSelectedNode();
 						hideRMenu();
 					}
 				}
 				
 				function addTreeNode(){
 					hideRMenu();
 					var newNode={name:"add"};
 					if(zTree.getSelectedNodes()[0]){
 						var selecteNode=zTree.getSelectedNodes()[0];
 						newNode=zTree.addNodes(selecteNode,newNode)[0];	
 						cmdQueue.push(Command.createAddCommand(Command.getOptions(newNode)));
 					}else{
 						newNode=zTree.addNodes(null,newNode)[0];
 						cmdQueue.push(Command.createAddCommand(Command.getOptions(newNode)));
 					}
 				}
 				function removeTreeNode(){
 					hideRMenu();
 					var nodes=zTree.getSelectedNodes();
 					if(nodes && nodes.length>0){
 							$.each(nodes,function(k,v){
 							
 								window.cmdQueue.push(Command.createRemoveCommand(Command.getOptions(v)));
 								zTree.removeNode(v);
//  								console.info(cmdQueue.length);
 							});
 					}
 				}
 				function getOptions(node){
 					var option={};
 					option.nodeObj=node;
 					option.zTree=zTree;
 					option.node=node.tId;
 					option.parentNode=node.parentTId;
 					
 					if(node.getPreNode()){
 						option.preNode=node.getPreNode().tId;
 					}
 					if(node.getNextNode()){
 						option.nextNode=node.getNextNode().tId;
 					}
 					
 					return option;
 				}
 				var beforeRenameValue="";
 				function modifyTreeNode(){
 					hideRMenu();
 					var nodes=zTree.getSelectedNodes();
 					beforeRenameValue=nodes[0].name;
 					zTree.editName(nodes[0]);
 				}
 				function showRMenu(type,x,y){
 					$("#rMenu").show();
 					switch(type){
 						case 'root':
 							showRMenuItem(['m_add'])
 							break;
 						case 'node':
 							var nodes=zTree.getSelectedNodes();
 							if(nodes && nodes.length<=1){
 								showRMenuItem(['m_add','m_modify','m_remove'])
 							}else if(nodes && nodes.length>1){
 								showRMenuItem(['m_remove'])
 							}
 							break;
 					}
 					
 					rMenu.css({"top":y+"px","left":x+"px"});
 					$("body").bind("mousedown",onBodyMouseDown);
 				}
 				function showRMenuItem(items){
 					$("#rMenu li").hide();
 					$.each(items,function(k,v){
 							$("#"+v).show();
 					})
 				}
 				function hideRMenu(){
 					if(rMenu){
 						$(rMenu).hide();
 						$("body").unbind("mousedown",onBodyMouseDown)
 					}
 				}
 				function onBodyMouseDown(event){
 					//console.log("mousedown"+event.target.id);
 					if(event.target.id!="rMenu" && $(event.target).parents("#rMenu").length<=0 ){
 						hideRMenu();
 					}
 				}
 				//rename
 				function zTreeOnRename(event,treeId,treeNode,isCancel){
 					if(beforeRenameValue!=treeNode.name){
 						var option=Command.getOptions(treeNode);
 						option.beforeValue=beforeRenameValue;
 						option.nowValue=treeNode.name;
 						window.cmdQueue.push(Command.createModifyCommand(option));
 					}
 				}
 				
 				////显示showTreeNode()
 				function showTreeNode(){
 					var nodes=zTree.getNodes();
//  					console.info(JSON.stringify(nodes));
 					//$.fn.zTree.init($("#treeDemo"),setting,zNodesTmp);	
 				}
 				function undo(){
 					var cmd=window.cmdQueue.pop();
 					if(cmd){
 						cmd.undo();
 					}
 					
 				}
 				var zTree,rMenu;
 				$(function(){
 					$.fn.zTree.init($("#treeDemo"),setting,zNodes);	
 					zTree=$.fn.zTree.getZTreeObj("treeDemo");
 					rMenu=$("#rMenu");
 				});
 			</script>
 		</head>
 		<body>
 			<div id="treeDemo" class="ztree"></div>
 			
 			
 			<div id="rMenu">
 				<ul>
 						<li id="m_add" onclick="addTreeNode()">新增</li>
 						<li id="m_modify" onclick="modifyTreeNode()">修改</li>
 						<li id="m_remove" onclick="removeTreeNode()">删除</li> 						
 				</ul>
 			</div>
 			<input type="button" value="ShowTreeNode" onclick="showTreeNode()"/>
 			<input type="button" value="undo" onclick="undo()"/>
 		</body>
</html>

 

分享到：
| Spring的BeanFactoryPostProcessor和BeanPo ...
评论
发表评论

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

相关推荐

    ztree官网 ztree官网

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

    ztree 支持右键 增删改操作

    在描述中提到的“ztree支持右键增删改操作”意味着ZTree允许用户通过鼠标右键点击节点来执行添加、删除和修改等操作，极大地提升了用户的交互体验和工作效率。 **ZTree的基本概念：** 1. **节点（Node）**：ZTree的...

    Ztree操作 AJAX

    根据给定的信息，本文将详细解析“Ztree操作 AJAX”的相关内容。主要分为以下几个部分：Ztree的基本介绍、AJAX的基本概念、如何结合Ztree与AJAX进行数据交互、示例代码解析以及可能遇到的问题和解决方案。 ### ...

    dwz,ztree整合，操作都在头部

    当我们说“dwz,ztree整合，操作都在头部”时，这意味着在DWZ框架的基础上，将ZTree的节点操作按钮集成到了页面的头部。这样做的好处是统一操作位置，提高用户操作的便捷性和一致性。下面我们将详细解释如何实现这一...

    jquery ztree 创建和操作

    《jQuery ZTree：创建与操作详解》 ZTree是一款基于jQuery的树形插件，它以其高效、灵活的特性在Web开发中广泛应用。本篇文章将深入探讨如何利用jQuery ZTree进行创建、操作以及优化，帮助开发者更好地理解和使用这...

    zTree帮助文档_ztree_

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

    zTree zTree zTree

    3. 初始化配置：设置zTree的配置项，如显示样式、节点操作行为等。 4. 创建节点：将JSON数据传递给zTree，通过$.fn.zTree.init()方法初始化树。 5. 监听事件：根据业务需求绑定事件处理函数。 四、API及事件 zTree...

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

    1. **复选框与单选按钮**：zTree允许在节点上添加复选框或单选按钮，支持全选、反选、级联选择等操作，常用于多选场景。 2. **节点操作**：如展开/折叠节点、选择/取消选择节点、添加/删除节点等，为用户提供丰富的...

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

    在实现上，ztree-select通常依赖于jQuery库，jQuery是一个轻量级的JavaScript库，提供了一系列便利的DOM操作、事件处理和动画效果，简化了前端开发工作。因此，在项目中，你需要同时引入ztree、ztree-select以及...

    ztree脚本、ztree下载

    ztree的核心特性在于其能够动态加载数据，支持多选、单选、拖放操作，并且提供了丰富的API接口供开发者进行自定义扩展。 1. **ztree脚本**：ztree的运行依赖于JavaScript，通过编写特定的脚本可以实现各种交互功能...

    bootstrap风格ztree适应移动端

    在描述中提到的"支持自定义编辑，添加列表，删除列表"，意味着该ZTree版本具备了动态操作的能力。用户可以对树形结构中的节点进行添加、编辑和删除操作，这在数据管理、权限分配、组织结构展示等场景下非常实用。...

    ztree官网参考文档及demo

    同时，zTree具备强大的事件机制和API接口，可以方便地进行交互操作和状态控制。 二、zTree核心特性 1. 数据加载：zTree支持动态加载和一次性加载两种模式，可以根据需求灵活选择。 2. 多种节点样式：提供多种节点...

    JQ.zTree树形菜单

    3. **交互操作**：zTree提供了丰富的点击、展开、折叠、选择、取消选择等交互事件，开发者可以通过监听这些事件来实现特定的功能。 4. **数据绑定**：zTree的数据模型设计灵活，可以将JSON数据或者XML数据绑定到树...

    zTree-zTree_v3.zip

    6. **权限控制**：通过配置，zTree可以实现对节点的显示、操作权限控制，适应企业级应用的权限管理需求。 7. **多语言支持**：zTree内置了多语言包，可以轻松实现国际化，满足全球化的项目需求。 8. **API接口丰富...

    zTree权限的赋予

    首先，zTree的核心功能在于其强大的数据处理和节点操作能力，通过JSON数据格式，我们可以方便地定义每个树节点的属性，如ID、名称、父节点ID、是否展开、是否可选等。对于权限管理，这些属性可以映射到用户角色、...

    zTree树的demo和API

    压缩包中的“zTree_v3”可能包含了各种示例代码，这些示例展示了zTree的不同应用场景和功能，如基本展示、多选模式、异步加载、拖拽操作等。通过分析和运行这些示例，开发者可以直观地了解zTree的用法，并根据实际...

    ztree filter demo ztree的一些代码

    zTree是一款基于JavaScript的树形插件，广泛应用于网页中的数据展示和操作。它具有丰富的配置项、强大的API接口以及良好的可扩展性，深受开发者喜爱。本文将重点解析zTree的过滤功能，并提供相关的代码示例，帮助...

    ztree_bootstrap样式风格

    `ZTree`的功能强大，支持多种操作，如选择、拖拽、编辑等，广泛应用于权限管理、文件目录、组织结构等场景。而`Bootstrap`则是世界上最流行的前端开发框架，以其简洁、灵活和响应式的设计理念受到开发者喜爱。 标题...

    ztree使用说明ztree.zip

    `setting`对象用于配置zTree的行为和样式，包括节点的展开方式、拖拽操作、右键菜单等。例如，设置默认展开所有节点： ```javascript var setting = { data: { simpleData: { enable: true, idKey: "id", pId...

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