Методы сохранения состояния

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

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

Сохранение состояния начинается с извлечения актуального расположения элементов. Для этого используется метод save(), который возвращает массив объектов, содержащих данные о каждом виджете:

let grid = GridStack.init();
let serializedData = grid.save();
console.log(serializedData);

Каждый объект массива имеет структуру:

  • x — координата элемента по оси X (столбец сетки).
  • y — координата по оси Y (строка сетки).
  • w — ширина элемента в единицах сетки.
  • h — высота элемента в единицах сетки.
  • id — уникальный идентификатор виджета (если задан).
  • Дополнительно можно сохранять пользовательские атрибуты через el.dataset или el.getAttribute.

Метод save() полезен для сериализации состояния в JSON, который можно отправлять на сервер или сохранять в локальное хранилище.

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

Для восстановления сетки используется метод load(), который принимает массив объектов, полученный методом save():

let grid = GridStack.init();
grid.load(serializedData);

Особенности работы метода load():

  • Позиции и размеры виджетов полностью восстанавливаются.
  • Если в данных присутствуют новые элементы, которых нет в DOM, Gridstack создаст их автоматически, если указан параметр content или шаблон элемента.
  • Можно комбинировать с методами добавления виджетов: addWidget() для динамического создания элементов перед восстановлением.

Пример с динамическим созданием:

serializedData.forEach(node => {
    grid.addWidget(`<div class="grid-stack-item" id="${node.id}">
                        <div class="grid-stack-item-content">Контент</div>
                    </div>`, 
                    {x: node.x, y: node.y, w: node.w, h: node.h});
});

Автоматическое сохранение при изменениях

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

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

Пример автоматической сериализации в localStorage:

grid.on('change', function(event, items) {
    let data = grid.save();
    localStorage.setItem('grid-state', JSON.stringify(data));
});

Для восстановления состояния при загрузке страницы:

document.addEventListener('DOMContentLoaded', () => {
    let savedData = JSON.parse(localStorage.getItem('grid-state') || '[]');
    if (savedData.length) grid.load(savedData);
});

Сохранение дополнительных данных виджетов

Метод save() возвращает базовые свойства сетки, но для сложных приложений часто требуется сохранять пользовательские данные. Gridstack позволяет расширять объекты с помощью опций data-gs-* или встроенных свойств:

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

При сохранении можно вручную добавлять эти атрибуты:

let serializedData = grid.save().map(node => ({
    ...node,
    color: document.getElementById(node.id)?.dataset.color
}));

Это позволяет полностью восстанавливать не только позиции, но и внешний вид или функциональность виджетов.

Использование JSON и серверной синхронизации

Для многопользовательских приложений или сохранения состояния на сервере лучше использовать JSON. Типичный поток:

  1. Получение состояния: grid.save().
  2. Преобразование в JSON: JSON.stringify(data).
  3. Отправка на сервер через fetch или axios.
  4. При загрузке страницы — получение JSON и восстановление через grid.load(data).

Пример синхронизации с сервером:

async function saveGrid() {
    let data = grid.save();
    await fetch('/save-grid', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(data)
    });
}

async function loadGrid() {
    let response = await fetch('/load-grid');
    let data = await response.json();
    grid.load(data);
}

Практические рекомендации

  • Всегда присваивайте виджетам уникальный id, чтобы избежать конфликтов при загрузке.
  • Используйте события change и added для реального времени сохранения, особенно в приложениях с динамическими изменениями.
  • Для сложных виджетов сохраняйте все пользовательские данные, необходимые для восстановления полной функциональности.
  • Сериализованное состояние лучше хранить в формате JSON для удобной передачи и восстановления.

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

Оглавление