zoukankan      html  css  js  c++  java
  • handsontable-developer guide-load and save

    不过handsontable不能用jquery取对象
    var
      $$ = function(id) {
        return document.getElementById(id);
      },
      container = $$('example1'),
      exampleConsole = $$('example1console'),
      autosave = $$('autosave'),
      load = $$('load'),
      save = $$('save'),
      autosaveNotification,
      hot;
    
    hot = new Handsontable(container, {
      startRows: 8,
      startCols: 6,
      rowHeaders: true,
      colHeaders: 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) {
          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';
      }
    });
    

    把数据保存在本地

    可在初始化或更新方法中设置persistentState为true:persistentStateSave, persistentStateLoad(把value存在valuePlaceholder.value), persistentStateReset,

    为什么要使用persistentState?可以把多个实例存储的数据分隔开。

    还不知道怎么用。

  • 相关阅读:
    学习笔记(4)---JQuery
    学习笔记---ES6
    angular.js的学习笔记(1)
    vue.js学习笔记(1)
    HTML5“爱心鱼”游戏总结
    学习笔记(3)---综合
    学习笔记(2)---CSS中的易混淆点
    学习笔记(1)----水平垂直居中的方法
    javascript:void(0)是什么意思
    private Int32? m_shopid;
  • 原文地址:https://www.cnblogs.com/wang-jing/p/4656303.html
Copyright © 2011-2022 走看看