将 handsontable 保存到持久状态

Question

我使用 handsontable 创建了一个 table:

hot = new Handsontable(container, {
        data: [],
        dataSchema: {id: null},
        startRows: 5,
        startCols: 1,
        colHeaders: ["Car"],
        columns: [
          {data: 'id'}
        ],
        rowHeaders: true,
        minSpareRows: 1,
        persistentState: true,
        onChange: function (change, source) {
            console.log(change);
            console.log(source);
        }
      });

他们在 saving/loading to/from 服务器上使用 ajax 精心设计了 example。但是，我只想使用持久状态来保存加载所有内容。

特别是当单元格的热值发生变化时，我想将此信息保存在某个本地存储中，以便以后检索。我最接近的是在 onChange 中使用 change 参数并将其手动保存到 localStorage。我的主要问题是一旦更改为某个本地存储，我如何保存单元格的信息？最好是 persistentStorage。

另外，我可以将整个 hot table 保存到本地存储吗？每次更新整个 table 或仅更新该特定单元格的值哪个更有效？有没有快速加载table的方法？您能否提供一个很好的示例，我如何 save/load table 到本地存储 on change?

Answer 1

有很多方法可以满足您的要求，所以您必须尝试一下看看。执行您要求的最常见方法是获取数据 onAfterChange。在此回调（阅读文档）中，您可以访问新值以及行和列索引。届时，您可以执行以下两项操作之一：

您可以将 localStorage 中的数据存储在 (row,col) 中。这是第一个选项。然后 onLoad 您可以遍历所有可用的键值对并设置数据数组。

您可以做的第二件事要容易得多，但成本更高。在onAfterChange回调中，每次保存hot.getData()的内容。你可以这样做：

// assuming 'hot' is the name of your handsontable instance
localStorage["data"] = hot.getData()

存储每个单元格的速度很快，并且在保存时花费的时间最少 space（因此这部分会很快），但实现加载代码比较困难。存储所有数据可能需要更长的时间，但它使您的代码更容易实现（加载时，只需将 data 对象设置为 localStorage.data 的值）。

我会先尝试存储所有数据（在您认为您将拥有的最大数据集上），然后看看它是否很慢。如果是，请使用每个单元格的方法。

编辑：持久状态取自documentation

以下是直接引用。这里与我之前发布的内容的不同之处在于，您不会执行 localStorage["data"] = hot.getData()，而是执行 hot.persistantStateSave("data", hot.getData())

如何在本地保存数据。

您可以将任何类型的数据保存在本地存储中，以在页面重新加载之间保持 table 状态。为了启用数据存储机制，必须将 persistantState 选项设置为 true（您可以在 Handsontable 初始化期间或使用 updateSettings 方法设置它）。启用 persistentState 后，它会公开 3 个挂钩：

persistentStateSave (key: String, value: Mixed) 在浏览器本地存储中保存给定键下的值。

persistentStateLoad (key: String, valuePlaceholder: Object) 加载 value，保存在给定 key 下，形成浏览器本地存储。加载的 value 将保存在 valuePlaceholder.value 中（这是由于 PluginHooks.execute() 方法的特定行为）。如果 key 下没有保存任何值，valuePlaceholder.value 将是 undefined.

persistentStateReset (key: String) 清除 key 下保存的值。如果没有给出 key，所有与 table 关联的值都将被清除。

Answer 2

最终，我做了这样的事情：

hot = new Handsontable(container, {
        data: [],
        dataSchema: {id: null},
        startCols: 4,
        colHeaders: ["ID"],
        columns: [
          {data: 'id'}
        ],
        rowHeaders: true,
        minSpareRows: 4,
        afterChange: function (change, source) {
            // restore table after reload of a page
            if (source === "loadData") {
                // load data from local storage
                if (localStorage['data']) {
                    var data = JSON.parse(localStorage['data'])
                    this.loadData(data);
                    this.render();
                    return
                }

            }
            else {
                // save all data to local storge if the edit happends
                localStorage['data'] = JSON.stringify(this.getData());
                return
            }
        }
    });

将 handsontable 保存到持久状态

save handsontable to persistent state

html

javascript

jquery

handsontable