Методы загрузки состояния

Gridstack.js предоставляет мощный механизм для работы с сеточными интерфейсами на веб-страницах, включая возможность сохранения и восстановления состояния сетки. Загрузка состояния — это процесс восстановления расположения и размеров виджетов на сетке после их изменения пользователем или после перезагрузки страницы. Этот процесс тесно связан с методами save() и load().

Методы загрузки состояния

`load(nodes, removeOld)`

Метод load используется для восстановления состояния сетки из заранее сохранённого массива объектов. Каждый объект в массиве описывает отдельный виджет и его параметры. Синтаксис метода:

grid.load(nodes, removeOld);

nodes — массив объектов, где каждый объект содержит свойства виджета: x, y, width, height, id и другие.
removeOld — булево значение (true или false), определяющее, удалять ли существующие виджеты перед загрузкой новых. Если true, сетка очищается; если false, новые элементы добавляются к текущим.

Пример массива для загрузки состояния:

const savedNodes = [
  {x: 0, y: 0, width: 4, height: 2, id: 'widget-1'},
  {x: 4, y: 0, width: 4, height: 3, id: 'widget-2'},
  {x: 0, y: 2, width: 8, height: 1, id: 'widget-3'}
];

Пример использования метода load:

const grid = GridStack.init();
grid.load(savedNodes, true);

В этом примере сетка будет полностью обновлена новыми виджетами, расположенными в соответствии с координатами из savedNodes.

Автоматическая подстройка виджетов

При загрузке состояния Gridstack.js выполняет проверку коллизий и ограничений сетки. Если координаты из сохранённого состояния выходят за пределы сетки или пересекаются с другими виджетами, Gridstack автоматически корректирует их положение.

Можно управлять этим процессом с помощью параметров и опций сетки, например:

float — позволяет виджетам занимать минимально возможное пространство, сдвигаясь вверх при наличии пустых ячеек.
disableOneColumnMode — предотвращает автоматическую перестройку сетки в узких экранах.

`removeAll()`

Перед загрузкой нового состояния иногда удобно удалить все существующие виджеты вручную:

grid.removeAll();
grid.load(savedNodes, false);

В этом случае параметр removeOld в load можно установить в false, так как сетка уже очищена.

Синхронизация с локальным хранилищем

Для сохранения и восстановления состояния между перезагрузками страницы используется localStorage:

// Сохранение состояния
const state = grid.save();
localStorage.setItem('gridState', JSON.stringify(state));

// Загрузка состояния
const savedState = JSON.parse(localStorage.getItem('gridState'));
if (savedState) {
  grid.load(savedState, true);
}

Метод save() возвращает массив объектов, совместимый с методом load(), что обеспечивает полную обратимость изменений.

Загрузка состояния при динамическом создании виджетов

Если виджеты создаются динамически после инициализации сетки, load также корректно работает. Важно убедиться, что каждый объект состояния содержит уникальный идентификатор id и корректные координаты x и y:

const newWidget = {x: 2, y: 1, width: 3, height: 2, id: 'widget-4'};
grid.load([newWidget], false);

При этом новые элементы добавляются к уже существующим виджетам без их удаления.

Обработка событий при загрузке

Gridstack.js позволяет отслеживать события изменения сетки даже при загрузке состояния. Ключевые события:

change — срабатывает при перемещении или изменении размеров виджетов.
added — срабатывает при добавлении нового виджета через load или addWidget.

Пример:

grid.on('added', function(event, items) {
  console.log('Добавлены виджеты:', items);
});

Это позволяет выполнять дополнительную обработку, например, обновление интерфейса или синхронизацию с сервером.

Методы загрузки состояния