zTree 回撤操作

最新推荐文章于 2024-11-17 11:44:11 发布

badlogic

最新推荐文章于 2024-11-17 11:44:11 发布

阅读量219

点赞数

分类专栏： html 文章标签： json javascript ViewUI

本文链接：https://blog.csdn.net/u014624659/article/details/84733238

版权

html 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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" οnclick="addTreeNode()">新增</li>
 						<li id="m_modify" οnclick="modifyTreeNode()">修改</li>
 						<li id="m_remove" οnclick="removeTreeNode()">删除</li> 						
 				</ul>
 			</div>
 			<input type="button" value="ShowTreeNode" οnclick="showTreeNode()"/>
 			<input type="button" value="undo" οnclick="undo()"/>
 		</body>
</html>