<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="handsontable-master/dist/handsontable.full.js"></script>
<script src="axios.min.js"></script>
<script src="jquery-1.10.2.min.js"></script>
<script src="samples.js"></script>
<link rel="stylesheet" media="screen" href="handsontable-master/dist/handsontable.full.css">
<link rel="stylesheet" type="text/css" href="https://handsontable.com/static/css/main.css">
</head>
<body>
<div data-jsfiddle="example1" class="ajax-container">
<div class="controls">
<button name="load" id="load" class="intext-btn">Load</button>
<button name="save" id="save" class="intext-btn">Save</button>
<label><input type="checkbox" name="autosave" id="autosave" checked="checked" autocomplete="off">Autosave</label>
</div>
<pre id="example1console" class="console">Click "Load" to load data from server</pre>
<div id="example1" class="hot handsontable htRowHeaders htColumnHeaders"></div>
</div>
</body>
<script>
var $$ = function (id) {
return document.getElementById(id);
},
container = $$('example1'),
exampleConsole = $$('example1console'),
autosave = $$('autosave'),
load = $$('load'),
save = $$('save'),
autosaveNotification,
hot;
hot = new Handsontable(container, {
cell: [
{row: 0, col: 0, readOnly: true}
],
startRows: 8,
startCols: 6,
rowHeaders: true,
colHeaders: true,
persistentState:true,
afterChange: function (change, source) { //这里就是异步提交的地方
if (source === 'loadData') {
return; //don't save this change
}
if (!autosave.checked) {
return;
}
clearTimeout(autosaveNotification);
ajax('scripts/json/save.json', 'GET', JSON.stringify({data: change}), function (data) {
return false;
exampleConsole.innerText = 'Autosaved (' + change.length + ' ' + 'cell' + (change.length > 1 ? 's' : '') + ')';
autosaveNotification = setTimeout(function () {
exampleConsole.innerText = 'Changes will be autosaved';
}, 1000);
});
}
});
Handsontable.dom.addEvent(load, 'click', function () {
ajax('scripts/json/load.json', 'GET', '', function (res) {
var data = JSON.parse(res.response);
hot.loadData(data.data);
exampleConsole.innerText = 'Data loaded';
});
});
Handsontable.dom.addEvent(save, 'click', function () {
// save all cell's data
ajax('scripts/json/save.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) {
exampleConsole.innerText = 'Changes will be autosaved';
}
else {
exampleConsole.innerText = 'Changes will not be autosaved';
}
});
</script>
</html>
