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>