hxc3-command
redo undo
Install
Screenshot
Demo
Development:
npm installnpm run dev
open browser:
http://127.0.0.1:8080/demo1/
原理 每次操作只记录操作的具体位置的变动, 而不是把整份数据做操作前后的备份。
例如 如果要删除表格第一行,第一列的数据, 只需要缓存住 内容变动的位置, 内容变动前后的数据。 这样撤销时,仍能根据这三个参数返回。
Usage
step1: create a new "commonCommand.js" File in your project, e.g: demo1/commonCommand.js
step2: write a pair
of functions, tips: the value of editCellContent
returned, will be the parameters of editCellContentRollup
;
commonCommand.js:
var commonCommand = /** * editOneCell * @param {[type]} d [description] * @return {[type]} [description] */ { var xpos = d0; var ypos = d1; var afterEditCon = d2; var beforeEditCon = d3; var data = d4; var cbk = d5; datayposxpos = afterEditCon; ; return d; } { var xpos = d0; var ypos = d1; var afterEditCon = d2; var beforeEditCon = d3; var data = d4; var cbk = d5; datayposxpos = beforeEditCon; ; return d; }
step3: register a command before use, 注意 每个命令执行过以后, 传入的参数都是在缓存中的, 会一直存在直到程序退出,所以每条命令传入的参数务必控制大小。 如例子中虽然传入了data
表格的全部数据,但因为数组是引用方式调用,所以该命令无论添加几次执行,缓存中还是那一个数组地址。
当然也可以在cbk
回调函数再执行对data
的修改
// globalconst hxc3 = {}; { var command = ; hxc3excelCommand = command; //////////////////// // redo undo 注册一下 // //////////////////// // edit cell commandaction"editCellContent" commonCommandeditCellContent commonCommandeditCellContentRollup; // delte cell commandaction"editCol" commonCommandeditCol commonCommandeditColRollup; // bind undo btn document { command; }; // bind redo btn document { command; };} ;
step4: 调用
// excute a commanddocument { // 数组对应的位置 hxc3excelCommand;}