Сериализация состояния сетки

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

Сериализация позволяет получить полное представление о положении, размере и свойствах каждого виджета в сетке в виде JavaScript-объекта или JSON. Это особенно важно для приложений, где пользователи могут настраивать интерфейс под свои нужды, а затем вернуться к сохранённой конфигурации.

Получение состояния сетки

Для сериализации Gridstack.js предоставляет метод save, который возвращает массив объектов, описывающих каждый виджет. Каждая запись включает ключевые свойства:

  • x и y — координаты верхнего левого угла виджета в ячейках сетки.
  • width и height — размеры виджета в ячейках.
  • id или el — уникальный идентификатор или DOM-элемент.
  • Дополнительные пользовательские атрибуты, если они были установлены через data-* или gs- свойства.

Пример получения состояния:

// Инициализация сетки
const grid = GridStack.init({
    column: 12,
    float: true
});

// Получение состояния
const serializedData = grid.save();
console.log(serializedData);

Пример вывода:

[
  { "x":0, "y":0, "width":4, "height":2, "id":"widget1" },
  { "x":4, "y":0, "width":8, "height":2, "id":"widget2" }
]

Сохранение состояния в локальное хранилище

Часто требуется сохранить состояние сетки, чтобы восстановить его при следующем посещении страницы. Для этого данные можно хранить в localStorage или на сервере через AJAX.

// Сохранение в localStorage
localStorage.setItem('gridState', JSON.stringify(grid.save()));

// Восстановление состояния
const savedState = JSON.parse(localStorage.getItem('gridState') || '[]');
savedState.forEach(widget => {
    grid.addWidget({
        id: widget.id,
        x: widget.x,
        y: widget.y,
        width: widget.width,
        height: widget.height
    });
});

Сериализация с дополнительными свойствами

Gridstack позволяет хранить пользовательские атрибуты вместе с основными параметрами виджета. Для этого при создании виджета можно использовать data-* атрибуты, которые автоматически сериализуются. Например:

<div class="grid-stack-item" data-gs-id="widget1" data-gs-color="red">
    <div class="grid-stack-item-content">Контент</div>
</div>

После вызова grid.save() объект будет содержать поле color:

{ "x":0, "y":0, "width":4, "height":2, "id":"widget1", "color":"red" }

Также можно использовать коллбек serialize, чтобы контролировать сериализацию:

const serializedData = grid.save(false, true); // true — включает атрибуты DOM

Восстановление состояния сетки

Для восстановления сетки используется метод addWidget. Важно учитывать:

  • Порядок добавления виджетов влияет на их расположение при столкновениях.
  • Если состояние содержит пользовательские атрибуты, их необходимо вручную передать при добавлении виджета.

Пример восстановления с сохранёнными атрибутами:

const savedState = JSON.parse(localStorage.getItem('gridState') || '[]');

savedState.forEach(item => {
    const el = document.createElement('div');
    el.classList.add('grid-stack-item');
    el.setAttribute('data-gs-id', item.id);
    el.setAttribute('data-gs-color', item.color);

    const content = document.createElement('div');
    content.classList.add('grid-stack-item-content');
    content.textContent = `Виджет ${item.id}`;
    el.appendChild(content);

    grid.addWidget(el, {x: item.x, y: item.y, width: item.width, height: item.height});
});

Обработка изменений в реальном времени

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

  • change — срабатывает при перемещении или изменении размера виджета.
  • added и removed — при добавлении или удалении виджетов.

Пример:

grid.on('change', function(event, items) {
    localStorage.setItem('gridState', JSON.stringify(grid.save()));
});

Такой подход обеспечивает постоянное обновление состояния, что важно для динамических интерфейсов.

Рекомендации по оптимизации сериализации

  1. Хранить только необходимые поля — минимизация объёма JSON улучшает производительность.
  2. Использовать уникальные идентификаторы — упрощает обновление виджетов без полной перерисовки сетки.
  3. Обрабатывать пользовательские атрибуты централизованно — позволяет избегать дублирования данных при восстановлении.
  4. Сохранять состояние по событию change с дебаунсом — предотвращает излишние вызовы localStorage.setItem при частых перемещениях.

Работа с серверной сериализацией

Для приложений с авторизацией часто требуется отправка состояния сетки на сервер:

fetch('/api/saveGrid', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(grid.save())
})
.then(response => response.json())
.then(data => console.log('Состояние сохранено на сервере', data));

Восстановление выполняется аналогично, получая JSON с сервера и создавая виджеты через addWidget.

Сериализация в Gridstack.js обеспечивает гибкое управление состоянием сетки, позволяет сохранять, восстанавливать и синхронизировать данные между сессиями или устройствами, что делает библиотеку особенно удобной для сложных пользовательских интерфейсов.

Оглавление