Js实现撤销恢复功能
之前一个项目要自己写个前端插件，其中一个的功能是实现对表格（table）的撤销和恢复功能，在网上百度了一大堆也没有找到合适的方法，后来灵光一闪，想到了一个简单的方法：用数组保存之前对表格的操作，执行撤销和恢复的时候去取数组的最后一个里面的信息实现操作。
1. 先定义2个数组，分别对应撤销操作和恢复操作。
var__gridundo = []; //撤销操作存放数据
var __gridredo = []; //恢复操作存放数据
2. 在对表格操作时保存操作信息到对应的操作。
//删除表格的一行
jxd.opticket.grid.deleteRow = function(index){
…………………….//删除操作
//用于撤销和恢复的信息
var undo = {};
undo['index'] = index;//index表示表格的行索引
undo['oper'] ='delete';//oper表示对表格的操作类型
undo['data'] = data;//data表示被删除的行信息
__gridundo.push(clone(undo));//把撤销信息加到数组中
__gridredo.splice(0,__gridredo.length);//这里需要把恢复数组中内容清空，因为撤销和恢复是相对的操作，比如删除-->撤销-->恢复—>撤销，这样的操作是可以的，但是如果删除-->撤销-->删除，这样的操作就不能再恢复了，可以参照word文档的撤销和恢复来理解这句。
}
/**
*撤销之前行操作
*
*/
jxd.opticket.grid.undo= function(){
//判断撤销数组中有没有数据
if(__gridundo.length ==0){
return ;
}
var table = $("#"+__ids.itemsGrid);
var undo = __gridundo[__gridundo.length- 1];//最后一个就是最近的操作
var index = undo['index'];//表格的行索引
var oper = undo['oper'];//对表格的操作
var up; //行上移还是下移
var data ;//行数据
if(oper =='move'){
up= undo['up'];
}else{
data= undo['data'];
}
if(oper =='insert'){//如果之前对表格的操作是添加一行，那么撤销就是删除刚刚添加的行
_deleteRow(parseInt(index));//调用删除行操作，这里的删除行的方法不是上面的删除行方法，因为这里的删除行方法里不需要向撤销数组中添加撤销的信息
}elseif(oper == 'delete'){
_insertRow(parseInt(index),data);
}elseif(oper == 'move'){
if(up ==true || up == 'True'){
_moveRow((parseInt(index)- 1),false);
}else{
_moveRow((parseInt(index)+ 1),true);
}
}
__gridredo.push(clone(undo));//把现在撤销的数据加到恢复的数组中
__gridundo.splice(__gridundo.length- 1,1);//删除撤销数组中最后一个数据，因为已经撤销过了。
}
/**
* 恢复之前行撤销的操作
*
*/
jxd.opticket.grid.redo = function(){
if(__gridredo.length ==0){
return ;
}
var table = $("#"+__ids.itemsGrid);
var redo = __gridredo[__gridredo.length- 1];
var index = redo['index'];
var oper = redo['oper'];
var up;
var data ;
if(oper =='move'){
up= redo['up'];
}else{
data= redo['data'];
}
if(oper =='insert'){
_insertRow(parseInt(index),data);
}else if(oper == 'delete'){
_deleteRow(parseInt(index));
}else if(oper == 'move'){
if(up ==true || up == 'True'){
_moveRow((parseInt(index)),true);
}else{
_moveRow((parseInt(index)),false);
}
}
__gridundo.push(clone(redo));
__gridredo.splice(__gridredo.length- 1,1);
}
到这里简单的js实现撤销和恢复操作就完成了
