handsontable-修改后自动异步提交数据

最新推荐文章于 2022-07-28 15:13:59 发布

LCRxxoo

最新推荐文章于 2022-07-28 15:13:59 发布

阅读量2.5k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/LCRxxoo/article/details/84938944

版权

js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!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>

LCRxxoo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
handsontable-修改后自动异步提交数据

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;script src="handsontable-master/dist/hands
复制链接

扫一扫

专栏目录