handsontable-修改后自动异步提交数据_异步 handsontable-CSDN博客

本文链接：https://blog.csdn.net/LCRxxoo/article/details/84938944
<!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>