js实现撤销恢复功能

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实现撤销和恢复操作就完成了