You can get the redoStack of SpreadJS using the getRedoStack method.
You can get the undoStack of SpreadJS using the getUndoStack method.
You can get or set the max size of the redoStack/undoStack using the maxSize method.
<template>
<div class="sample-tutorial">
<!-- Workbook host element -->
<gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread">
<gc-worksheet> </gc-worksheet>
</gc-spread-sheets>
<div class="options-container">
<label>Make any changes such as editing text or resizing row and cols then undo or redo your actions using the
below buttons.</label>
<div class="option-row">
<input type="button" value="Redo" class="gc-redo" id="gc-redo-button" />
<input type="button" value="Undo" class="gc-undo" id="gc-undo-button" />
</div>
<div class="gc-undo-stack-container option-row">
<label>The undoStack includes the following command:</label>
<textarea type="text" class="gc-stack-list" id="gc-undo-stack-container" cols="30"></textarea>
</div>
<div class="gc-redo-stack-container option-row">
<label>The redoStack includes the following command:</label>
<textarea type="text" class="gc-stack-list" id="gc-redo-stack-container" cols="30"></textarea>
</div>
<div class="option-row">
<label>Undo/Redo Stack Max Size</label>
<input type="number" min="0" max="2147483647" id="gc-max-size" class="gc-max-size" value="10" />
<input type="button" id="gc-max-size-set" value="set" />
</div>
</div>
</div>
</template>
<script setup>
import { shallowRef, watch } from "vue";
import "@mescius/spread-sheets-vue";
import GC from '@mescius/spread-sheets';
import "./data.js";
let mySpread;
let initSpread = function (spread) {
mySpread = spread;
attachEvent();
executeCommand();
updateInfo();
}
function attachEvent() {
var spread = mySpread;
spread.fromJSON(data[0]);
var events = GC.Spread.Sheets.Events;
spread.bind(events.ValueChanged, updateInfo);
spread.bind(events.ViewZoomed, updateInfo);
spread.bind(events.ColumnChanged, updateInfo);
spread.bind(events.ColumnWidthChanged, updateInfo);
spread.bind(events.RowChanged, updateInfo);
spread.bind(events.RowHeightChanged, updateInfo);
let setButton = _getElementById("gc-max-size-set");
let maxSizeDom = _getElementById("gc-max-size");
let redoButton = _getElementById("gc-redo-button");
let undoButton = _getElementById("gc-undo-button");
let undoManager = spread.undoManager();
setButton.addEventListener("click", () => {
let value = Number(maxSizeDom.value);
if (!isNaN(value)) {
spread.undoManager().maxSize(value);
}
});
redoButton.addEventListener("click", () => {
undoManager.redo();
updateInfo(spread);
});
undoButton.addEventListener("click", () => {
undoManager.undo();
updateInfo(spread);
});
}
function executeCommand() {
var spread = mySpread;
var commandManager = spread.commandManager();
let sheet = spread.getActiveSheet();
let sheetName = sheet.name();
commandManager.execute({
cmd: "resizeColumn",
sheetName: sheetName,
size: 70,
rowHeader: false,
columns: [{
firstCol: 0,
lastCol: 5
}],
});
commandManager.execute({
cmd: "editCell",
sheetName: sheetName,
row: 0,
col: 0,
newValue: "Edit Cell",
autoFormat: true,
});
commandManager.execute({
cmd: "resizeRow",
sheetName: sheetName,
rows: [{
firstRow: 0,
lastRow: 5,
}],
size: 30,
columnHeader: false,
})
spread.undoManager().undo();
}
function updateInfo() {
var undoManager = mySpread.undoManager();
setTimeout(() => {
updateUndoInfo(undoManager);
updateRedoInfo(undoManager);
}, 0);
}
function updateUndoInfo(undoManager) {
var undoStack = undoManager.getUndoStack();
var description = getDescription(undoStack);
let undoContainer = _getElementById("gc-undo-stack-container");
undoContainer.value = description;
}
function updateRedoInfo(undoManager) {
var redoStack = undoManager.getRedoStack();
let description = getDescription(redoStack);
let redoContainer = _getElementById("gc-redo-stack-container");
redoContainer.value = description;
}
function getDescription(actionStack) {
let description = "";
for (var i = 0; i < actionStack.length; i++) {
description = description + (i + 1) + "." + actionStack[i].cmd + "\r\n";
}
return description;
}
function _getElementById(id) {
return document.getElementById(id);
}
</script>
<style scoped>
#app {
height: 100%;
}
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.sample-spreadsheets {
width: calc(100% - 280px);
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 280px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.option-row {
font-size: 14px;
padding: 5px;
margin-top: 10px;
}
.gc-stack-list {
width: 100%;
height: 150px;
margin-top: 10px;
}
.gc-stack-button {
margin: 0 5px;
}
</style>
<!DOCTYPE html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>SpreadJS VUE</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/en/vue3/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/en/vue3/node_modules/systemjs/dist/system.src.js"></script>
<script src="./systemjs.config.js"></script>
<script src="./compiler.js" type="module"></script>
<script src="$DEMOROOT$/spread/source/data/outlineColumn-wbs.js" type="text/javascript"></script>
<script>
var System = SystemJS;
System.import("./src/app.js");
System.import('$DEMOROOT$/en/lib/vue3/license.js');
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
var data = [{
"version":"12.0.0",
"tabStripRatio":0.6,
"sheetCount":1,
"sheets":{
"Sheet1":{
"name":"Sheet1",
"rowCount":114,
"columnCount":21,
"activeRow":2,
"activeCol":2,
"data":{
"dataTable":{
"2":{
"2":{
"value":"Student",
"style":
{
"foreColor" : "#FFFFFF",
"backColor" : "#82BC00",
"hAlign" : 1
}
},
"3":{
"value":"Language",
"style": {
"foreColor" : "#FFFFFF",
"backColor" : "#82BC00",
"hAlign" : 1
}
},
"4":{
"value":"Math",
"style": {
"foreColor" : "#FFFFFF",
"backColor" : "#82BC00",
"hAlign" : 1
}
},
"5":{
"value":"Science",
"style": {
"foreColor" : "#FFFFFF",
"backColor" : "#82BC00",
"hAlign" : 1
}
},
"6":{
"value":"Music",
"style": {
"foreColor" : "#FFFFFF",
"backColor" : "#82BC00",
"hAlign" : 1
}
},
"7":{
"value":"History",
"style": {
"foreColor" : "#FFFFFF",
"backColor" : "#82BC00",
"hAlign" : 1
}
}
},
"3":{
"2":{
"value":"Ally",
"style":{"backColor" : "#F4F8EB", "hAlign" : 1}
},
"3":{
"value":95.2,
"style":{"backColor" : "#F4F8EB", "hAlign" : 1}
},
"4":{
"value":65.2,
"style":{"backColor" : "#F4F8EB", "hAlign" : 1}
},
"5":{
"value":75.2,
"style":{"backColor" : "#F4F8EB", "hAlign" : 1}
},
"6":{
"value":95.2,
"style":{"backColor" : "#F4F8EB", "hAlign" : 1}
},
"7":{
"value":91.8,
"style":{"backColor" : "#F4F8EB", "hAlign" : 1}
}
},
"4":{
"2":{
"value":"Tom",
"style":{"backColor" : "#F4F8EB", "hAlign" : 1}
},
"3":{
"value":81.8,
"style":{"backColor" : "#F4F8EB", "hAlign" : 1}
},
"4":{
"value":95.2,
"style":{"backColor" : "#F4F8EB", "hAlign" : 1}
},
"5":{
"value":95,
"style":{"backColor" : "#F4F8EB", "hAlign" : 1}
},
"6":{
"value":75.2,
"style":{"backColor" : "#F4F8EB", "hAlign" : 1}
},
"7":{
"value":88,
"style":{"backColor" : "#F4F8EB", "hAlign" : 1}
}
},
"5":{
"2":{
"value":"Jack",
"style":{"backColor" : "#F4F8EB", "hAlign" : 1}
},
"3":{
"value":95.2,
"style":{"backColor" : "#F4F8EB", "hAlign" : 1}
},
"4":{
"value":68.2,
"style":{"backColor" : "#F4F8EB", "hAlign" : 1}
},
"5":{
"value":65.2,
"style":{"backColor" : "#F4F8EB", "hAlign" : 1}
},
"6":{
"value":88,
"style":{"backColor" : "#F4F8EB", "hAlign" : 1}
},
"7":{
"value":79,
"style":{"backColor" : "#F4F8EB", "hAlign" : 1}
}
},
"6":{
"2":{
"value":"John",
"style":{"backColor" : "#F4F8EB", "hAlign" : 1}
},
"3":{
"value":68.2,
"style":{"backColor" : "#F4F8EB", "hAlign" : 1}
},
"4":{
"value":81.8,
"style":{"backColor" : "#F4F8EB", "hAlign" : 1}
},
"5":{
"value":86,
"style":{"backColor" : "#F4F8EB", "hAlign" : 1}
},
"6":{
"value":75,
"style":{"backColor" : "#F4F8EB", "hAlign" : 1}
},
"7":{
"value":86,
"style":{"backColor" : "#F4F8EB", "hAlign" : 1}
}
},
"7":{
"2":{
"value":"Lily",
"style":{"backColor" : "#F4F8EB", "hAlign" : 1}
},
"3":{
"value":95.2,
"style":{"backColor" : "#F4F8EB", "hAlign" : 1}
},
"4":{
"value":65.2,
"style":{"backColor" : "#F4F8EB", "hAlign" : 1}
},
"5":{
"value":95.2,
"style":{"backColor" : "#F4F8EB", "hAlign" : 1}
},
"6":{
"value":95.2,
"style":{"backColor" : "#F4F8EB", "hAlign" : 1}
},
"7":{
"value":91.8,
"style":{"backColor" : "#F4F8EB", "hAlign" : 1}
}
},
"8":{
"2":{
"value":"Linda",
"style":{"backColor" : "#F4F8EB", "hAlign" : 1}
},
"3":{
"value":75.2,
"style":{"backColor" : "#F4F8EB", "hAlign" : 1}
},
"4":{
"value":95.2,
"style":{"backColor" : "#F4F8EB", "hAlign" : 1}
},
"5":{
"value":88,
"style":{"backColor" : "#F4F8EB", "hAlign" : 1}
},
"6":{
"value":65.2,
"style":{"backColor" : "#F4F8EB", "hAlign" : 1}
},
"7":{
"value":65.2,
"style":{"backColor" : "#F4F8EB", "hAlign" : 1}
}
},
"9":{
"2":{
"value":"Will",
"style":{"backColor" : "#F4F8EB", "hAlign" : 1}
},
"3":{
"value":95.2,
"style":{"backColor" : "#F4F8EB", "hAlign" : 1}
},
"4":{
"value":94.8,
"style":{"backColor" : "#F4F8EB", "hAlign" : 1}
},
"5":{
"value":94,
"style":{"backColor" : "#F4F8EB", "hAlign" : 1}
},
"6":{
"value":55.2,
"style":{"backColor" : "#F4F8EB", "hAlign" : 1}
},
"7":{
"value":88,
"style":{"backColor" : "#F4F8EB", "hAlign" : 1}
}
}
}
},
}
}
}];
(function (global) {
SystemJS.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
packageConfigPaths: [
'./node_modules/*/package.json',
"./node_modules/@mescius/*/package.json",
"./node_modules/@babel/*/package.json",
"./node_modules/@vue/*/package.json"
],
map: {
'vue': "npm:vue/dist/vue.esm-browser.js",
'tiny-emitter': 'npm:tiny-emitter/index.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
"systemjs-babel-build": "npm:systemjs-plugin-babel/systemjs-babel-browser.js",
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-resources-en': 'npm:@mescius/spread-sheets-resources-en/index.js',
'@mescius/spread-sheets-vue': 'npm:@mescius/spread-sheets-vue/index.js'
},
meta: {
'*.css': { loader: 'systemjs-plugin-css' },
'*.vue': { loader: "../plugin-vue/index.js" }
}
});
})(this);
