Форматы хранения данных

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

1. JSON-формат

JSON является основным и наиболее универсальным форматом хранения данных в Gridstack.js. Каждый виджет представлен объектом с набором свойств:

{
  "x": 0,
  "y": 0,
  "width": 4,
  "height": 2,
  "id": "widget1",
  "content": "<div>Содержимое виджета</div>"
}

Ключевые свойства:

  • x и y — координаты верхнего левого угла виджета на сетке.
  • width и height — размеры виджета в единицах сетки.
  • id — уникальный идентификатор виджета, полезен для сохранения и синхронизации.
  • content — HTML-контент виджета. Может быть опущен, если контент формируется динамически.

JSON-формат позволяет легко сериализовать и десериализовать состояние сетки через методы grid.save() и GridStack.addWidget().

2. Data Attributes (HTML-атрибуты)

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

<div class="grid-stack">
  <div class="grid-stack-item" gs-x="0" gs-y="0" gs-width="4" gs-height="2" id="widget1">
    <div class="grid-stack-item-content">Содержимое виджета</div>
  </div>
</div>

Особенности:

  • Атрибуты gs-x, gs-y, gs-width, gs-height определяют положение и размер.
  • Этот способ удобен для начальной загрузки сетки, когда данные известны на этапе рендеринга HTML.
  • Позволяет визуально видеть конфигурацию виджетов в коде страницы.
  • Позволяет Gridstack.js автоматически инициализировать сетку без вызова методов сериализации.

Ограничения:

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

3. Сериализация состояния через API

Gridstack.js предоставляет методы для работы с данными виджетов:

  • grid.save() — возвращает массив объектов с текущими позициями и размерами виджетов.
  • grid.load(nodes) — загружает состояние сетки из массива объектов в формате JSON.
  • grid.batchUpdate() / grid.commit() — позволяет выполнять серию изменений виджетов с последующим сохранением состояния.

Пример:

const grid = GridStack.init();

const savedState = grid.save(); // получаем массив объектов
console.log(savedState);

grid.removeAll();
grid.load(savedState); // восстанавливаем сетку из сохраненных данных

Методы API делают возможным хранение состояния на сервере или локально в браузере через localStorage.

4. Хранение дополнительных данных

Gridstack.js позволяет расширять формат данных виджетов через кастомные свойства. Например:

grid.addWidget({
  x: 0,
  y: 0,
  width: 4,
  height: 2,
  id: "widget2",
  title: "Панель статистики",
  type: "chart",
  content: "<canvas></canvas>"
});
  • Любое свойство, добавленное к объекту виджета, будет сохранено при использовании grid.save().
  • Позволяет интегрировать сетку с внешними системами, например, с настройками пользователя или базой данных.

5. Сравнение форматов

Формат Плюсы Минусы
JSON Универсальный, легко сохраняется и загружается, поддерживает любые данные Требует сериализации и десериализации, не виден в HTML
Data Attributes Простая инициализация из HTML, видно в разметке Сложно хранить дополнительные данные, труднее изменять динамически
API Methods Позволяет гибко управлять состоянием, легко интегрируется с сервером Требует написания JavaScript-кода, зависит от инициализации Gridstack

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

  • Для статической сетки лучше использовать HTML-атрибуты.
  • Для динамических интерфейсов и сохранения состояния на сервере предпочтителен JSON через API.
  • Для сложных приложений рекомендуется использовать кастомные свойства для хранения дополнительной информации о виджетах.

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

Оглавление