Сохранить handsontable в постоянное состояние

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. Тем не менее, я просто хочу использовать постоянное состояние, чтобы сохранить загрузку всех вещей.

В частности, я хочу, чтобы при изменении значения ячейки в горячем состоянии я хотел сохранить эту информацию в каком-либо локальном хранилище, чтобы я мог получить ее позже. Самое близкое, что я получил, это использовать change параметр в onChange и сохраните его вручную в 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).

Сначала я бы попытался сохранить все данные (на самом большом наборе данных, который вы когда-либо имели) и посмотреть, будет ли он медленным. Если это так, используйте подход для каждой ячейки.

РЕДАКТИРОВАТЬ: постоянное состояние взято из документации

Ниже приводится прямая цитата. Отличие от того, что я написал ранее, состоит в том, что вместо того, чтобы делать 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() метод). Если значение не было сохранено в keyvaluePlaceholder.value будет undefined,

persistentStateReset (key: String) Сбрасывает значение, сохраненное в key, Если нет key задано, все значения, связанные с таблицей, будут очищены.