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

js实现撤销恢复功能相关推荐

js实现撤销恢复_我们常用的撤销和恢复功能，它们使用了什么设计模式实现吗？...
现有场景描述: 现在无论是系统自带的键盘还是第三方的键盘一般都自带撤销和恢复功能,你知道它们是用的什么模式实现的吗? 它们用的是命令模式+观察者模式,你答对了吗? 简单科普一下啥是命令模式(Comm ...
js实现撤销恢复_电脑硬盘丢失的资料怎么恢复？选对方法是关键
电脑硬盘丢失的资料怎么恢复?对电脑有一定了解的小小伙伴都知道,电脑硬盘是存储重要数据资料的地方.当前,主流的硬盘主要分为移动硬盘和固态硬盘.但是,不管您的重要资料存储在哪一种硬盘当中,都会因为硬盘自己 ...
我们常用的撤销和恢复功能，你知道它们使用了什么设计模式吗？
点击上方蓝色"程序猿DD",选择"设为星标" 回复"资源"获取独家整理的学习资料! 作者 | 滴水微澜来源 | cnblogs.com/z ...
再涨个姿势，我们常用的撤销和恢复功能，你知道它们使用了什么设计模式实现吗？...
作者:滴水微澜 cnblogs.com/zhou--fei/p/9905536.html 现有场景描述: 现在无论是系统自带的键盘还是第三方的键盘一般都自带撤销和恢复功能,你知道它们是用的什么模式实现 ...
java 撤销恢复按钮_再涨个姿势，我们常用的撤销和恢复功能，你知道它们使用了什么设计模式实现吗？...
作者:滴水微澜现有场景描述:现在无论是系统自带的键盘还是第三方的键盘一般都自带撤销和恢复功能,你知道它们是用的什么模式实现的吗? 它们用的是命令模式+观察者模式,你答对了吗? 简单科普一下啥是命令 ...
Fabric.js 橡皮擦的用法（包含恢复功能）
theme: smartblue 本文简介点赞 + 关注 + 收藏 = 学会了本文介绍 Fabric.js 的橡皮擦功能. Fabric.js 的基础包并没有包含橡皮擦模块,如果你的项目需要使用橡 ...
JavaScript 基于栈和命令模式的撤销恢复操作
文章目录前言一.初期设想二.如何收集状态 1.通信尝试 2.如何通信三.管理者与执行者 1.数据驱动 2.管理者 3.执行者总结前言这是一个基于原生JavaScript+Three.js ...
java 撤销恢复按钮_java文本的撤销和恢复
文本的撤销和恢复是通过 addUndoableEditListener(UndoableEditListener listener)这个方法来注册实现的.只要是Document类及其子类都可以注册撤销 ...
JS实现在线ps功能
功能介绍本系统是基于fabric.js实现的canvas版图片,文本编辑器,支持对图片的放大,缩小,旋转,镜面翻转,拖动,显示/隐藏图层,删除图层,替换图层等操作,对文本支持修改文本内容,颜色,字体 ...

js实现撤销恢复功能

js实现撤销恢复功能相关推荐

最新文章

热门文章