Question

我使用handsontable创建了一个表：

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);
        }
      });

他们使用ajax在服务器上保存/加载时有一个非常精细的example。但是，我只想使用持久状态来保存所有东西的负载。

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

另外，我可以将整个hot表保存到本地存储吗？什么更有效的是每次更新整个表，或只更新该特定单元的值？是否有快速加载表格的方法？您能否提供一个很好的示例如何在更改时将表保存/加载到本地存储？

Answer 1

最终，我选择了这样的事情：

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
            }
        }
    });

Answer 2

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

您可以localStorage (row,col)存储该位置的数据。这是第一个选择。然后在onLoad上，您可以浏览所有可用的键，值对并设置数据数组。

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

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

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

我会首先尝试存储所有数据（在你认为你曾经拥有的最大数据集上）并查看它是否很慢。如果是，请使用每单元格方法。

编辑：来自documentation

的持久状态

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

如何在本地保存数据。

您可以将任何类型的数据保存在本地存储中，以在页面重新加载之间保留表状态。为了启用数据存储机制，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，则将清除与表关联的所有值。

将handontable保存到持久状态

2 个答案: