Spreadsheet Change History
All important changes in the spreadsheet are tracked under the History internal container. From version 8 on, the history is one array shared for all worksheets. In this section, we provide a few more details about the spreadsheet changes tracker.
Documentation
Methods
The undo and redo methods are normally invoked by the CTRL+Z, CTRL+Y keyboard shortcut. The following methods can be called programmatically, as follows:
Method | Description |
---|---|
undo() | Undo the last spreadsheet changes.undo() : void |
redo() | Redo the most recent spreadsheet changes.redo() : void |
setHistory(object) | Redo the most recent spreadsheet changes.setHistory(history: Object) : void |
resetHistory() | Redo the most recent spreadsheet changes.resetHistory() : void |
Events
Events related to the history changes tracker.
Event | Description |
---|---|
onredo | onredo(worksheet: Object, info: Object) : null The info array contains all necessary information about the history and depends on which change was performed. |
onundo | onundo(worksheet: Object, info: Object) : null The info array contains all necessary information about the history and depends on which change was performed. |
Example
As explained above, the history actions are available on the spreadsheet level.
<html>
<script src="https://jspreadsheet.com/v9/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v9/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />
<div id='spreadsheet'></div>
<br/>
<input type="button" value="Undo" id="undobtn" />
<input type="button" value="Redo" id="redobtn" />
<input type="button" value="Reset" id="resetbtn" />
<script>
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('YzgwZDI2NmI0ZmRhMGFiN2FjNTdjYjEwN2ViMmU2Y2QzMjljMmVmOTY3MDY0YzI5ZjI1NGMwOTQ4NjkxM2E2OGNhMjZiOTliMzY2NzNhMTBjNTA1Mjg3ZTM0NjY4NmI0OGYwOWQwZWI3YzA1NzQ1YWU5ZGZlMDRiMWVkZjU1MzgsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpJNE16QXdORFEzTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
// Create the spreadsheet
let spreadsheet = jspreadsheet(document.getElementById('spreadsheet'), {
worksheets: [{
minDimensions: [8, 8],
}],
});
document.getElementById("undobtn").onclick = () => spreadsheet[0].undo()
document.getElementById("redobtn").onclick = () => spreadsheet[0].redo()
document.getElementById("resetbtn").onclick = () => spreadsheet[0].parent.resetHistory()
</script>
</html>