the code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Kimera Sheet</title>
<link rel="stylesheet" href="../../node_modules/handsontable/dist/handsontable.full.min.css">
<link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css">
<!-- <link rel="stylesheet" href="../sweetAlert2/sweetAlert2.min.css"> -->
<link rel="stylesheet" href="../../node_modules/@fortawesome/fontawesome-free/css/all.css">
<link rel="stylesheet" href="../main.css">
<!-- <script>window.$ = window.jQuery = require('jquery');</script> -->
<script src="../../node_modules/jquery/dist/jquery.min.js"></script>
<script src="../../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- <script src="../sweetAlert2/sweetalert2.min.js"></script> -->
<script src="../../node_modules/handsontable/dist/handsontable.full.min.js"></script>
<!-- <script src="../handsontable/main_renderer.js"></script> -->
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="navbar-brand">Kimera Sheet</div>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
</ul>
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#" id="example1console"> <span class="sr-only">(current)</span></a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<!-- <div class="custom-control custom-switch mr-2">
<input type="checkbox" class="custom-control-input" name="autosave" id="autosave">
<label class="custom-control-label" for="autosave">Autosave</label>
</div> -->
<div class="custom-control custom-checkbox mr-2">
<input type="checkbox" class="custom-control-input" name="autosave" id="autosave">
<label class="custom-control-label" for="autosave">Autosave</label>
</div>
<button type="button" class="btn btn-outline-secondary btn-sm mr-1" name="load" id="load"><i class="fas fa-download"></i> Load</button>
<button type="button" class="btn btn-outline-primary btn-sm mr-1" name="save" id="save"><i class="far fa-save"></i> Save</button>
<button class="btn btn-outline-success my-sm-0 btn-sm" id="export-csv" type="button"><i class="fas fa-file-export"></i> Export to CSV</button>
</form>
</div>
</nav>
<div id="kimera_sheet"></div>
<script>
var
$save = document.getElementById('save'),
$load = document.getElementById('load'),
$autosave = document.getElementById('autosave'),
$console = document.getElementById('example1console'),
container = document.getElementById('kimera_sheet'),
autosaveNotification,
hot;
hot = new Handsontable(container, {
startRows: 500,
startCols: 26,
stretchH: "all",
rowHeaders: true,
colHeaders: true,
afterChange: function (change, source) {
if (source === 'loadData') { return; }
if (!$autosave.checked) { return; }
clearTimeout(autosaveNotification);
$.ajax({
url: '../../autoSave/kimera.json',
type: 'POST',
dataType: 'json',
contentType: 'application/json',
data: JSON.stringify({data: change}),
// async: true,
processData: true,
cache: false,
success: function(data){
$console.innerHTML = 'Changes will be autosaved';
autosaveNotification = setTimeout(() => {
$console.innerHTML = 'Autosaved (' + change.length + ' ' + 'cell' + (change.length > 1 ? 's' : '') + ')';
}, 1000);
},
error: function(xhr){
$console.innerHTML = 'Error, data not saved';
}
});
},
contextMenu: true,
licenseKey: 'non-commercial-and-evaluation',
});
// load function
Handsontable.dom.addEvent($load, 'click', function () {
$.ajax('../../autoSave/kimera.json', 'GET', '', function(res) {
var data = JSON.parse(res.response);
hot.loadData(data.data);
$console.innerText = 'Data loaded';
});
});
//save function
Handsontable.dom.addEvent($save, 'click', function () {
$.ajax('../../autoSave/kimera.json', 'GET', JSON.stringify({data: hot.getData()}), function (res) {
var response = JSON.parse(res.response);
if (response.result === 'ok') {
exampleConsole.innerText = 'Data saved';
}
else {
exampleConsole.innerText = 'Save error';
}
});
})
Handsontable.dom.addEvent($autosave, 'click', function () {
if ($autosave.checked) {
$console.innerHTML = 'Changes will be autosaved';
} else {
$console.innerHTML = 'Changes will not be autosaved';
}
});
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>Kimera Sheet</title>
<link rel="stylesheet" href="../../node_modules/handsontable/dist/handsontable.full.min.css">
<link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css">
<!-- <link rel="stylesheet" href="../sweetAlert2/sweetAlert2.min.css"> -->
<link rel="stylesheet" href="../../node_modules/@fortawesome/fontawesome-free/css/all.css">
<link rel="stylesheet" href="../main.css">
<!-- <script>window.$ = window.jQuery = require('jquery');</script> -->
<script src="../../node_modules/jquery/dist/jquery.min.js"></script>
<script src="../../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- <script src="../sweetAlert2/sweetalert2.min.js"></script> -->
<script src="../../node_modules/handsontable/dist/handsontable.full.min.js"></script>
<!-- <script src="../handsontable/main_renderer.js"></script> -->
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="navbar-brand">Kimera Sheet</div>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
</ul>
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#" id="example1console"> <span class="sr-only">(current)</span></a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<!-- <div class="custom-control custom-switch mr-2">
<input type="checkbox" class="custom-control-input" name="autosave" id="autosave">
<label class="custom-control-label" for="autosave">Autosave</label>
</div> -->
<div class="custom-control custom-checkbox mr-2">
<input type="checkbox" class="custom-control-input" name="autosave" id="autosave">
<label class="custom-control-label" for="autosave">Autosave</label>
</div>
<button type="button" class="btn btn-outline-secondary btn-sm mr-1" name="load" id="load"><i class="fas fa-download"></i> Load</button>
<button type="button" class="btn btn-outline-primary btn-sm mr-1" name="save" id="save"><i class="far fa-save"></i> Save</button>
<button class="btn btn-outline-success my-sm-0 btn-sm" id="export-csv" type="button"><i class="fas fa-file-export"></i> Export to CSV</button>
</form>
</div>
</nav>
<div id="kimera_sheet"></div>
<script>
var
$save = document.getElementById('save'),
$load = document.getElementById('load'),
$autosave = document.getElementById('autosave'),
$console = document.getElementById('example1console'),
container = document.getElementById('kimera_sheet'),
autosaveNotification,
hot;
hot = new Handsontable(container, {
startRows: 500,
startCols: 26,
stretchH: "all",
rowHeaders: true,
colHeaders: true,
afterChange: function (change, source) {
if (source === 'loadData') { return; }
if (!$autosave.checked) { return; }
clearTimeout(autosaveNotification);
$.ajax({
url: '../../autoSave/kimera.json',
type: 'POST',
dataType: 'json',
contentType: 'application/json',
data: JSON.stringify({data: change}),
// async: true,
processData: true,
cache: false,
success: function(data){
$console.innerHTML = 'Changes will be autosaved';
autosaveNotification = setTimeout(() => {
$console.innerHTML = 'Autosaved (' + change.length + ' ' + 'cell' + (change.length > 1 ? 's' : '') + ')';
}, 1000);
},
error: function(xhr){
$console.innerHTML = 'Error, data not saved';
}
});
},
contextMenu: true,
licenseKey: 'non-commercial-and-evaluation',
});
// load function
Handsontable.dom.addEvent($load, 'click', function () {
$.ajax('../../autoSave/kimera.json', 'GET', '', function(res) {
var data = JSON.parse(res.response);
hot.loadData(data.data);
$console.innerText = 'Data loaded';
});
});
//save function
Handsontable.dom.addEvent($save, 'click', function () {
$.ajax('../../autoSave/kimera.json', 'GET', JSON.stringify({data: hot.getData()}), function (res) {
var response = JSON.parse(res.response);
if (response.result === 'ok') {
exampleConsole.innerText = 'Data saved';
}
else {
exampleConsole.innerText = 'Save error';
}
});
})
Handsontable.dom.addEvent($autosave, 'click', function () {
if ($autosave.checked) {
$console.innerHTML = 'Changes will be autosaved';
} else {
$console.innerHTML = 'Changes will not be autosaved';
}
});
</script>
</body>
</html>