Методы получения данных

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

Метод save()

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

  • x — горизонтальная позиция в сетке
  • y — вертикальная позиция
  • width — ширина в ячейках сетки
  • height — высота в ячейках сетки
  • id — идентификатор элемента (если задан)
  • content — HTML-контент или пользовательские данные

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

const grid = GridStack.init();
const layoutData = grid.save();
console.log(layoutData);

Результат:

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

save() полезен для сериализации состояния сетки перед сохранением на сервер или в localStorage.

Метод saveAsJSON(options)

Расширенная версия метода save() позволяет указать опции, определяющие, какие данные включать в вывод. Например:

  • serializeGrid — включать свойства самой сетки
  • serializeNode — включать дополнительные пользовательские свойства для каждого узла

Пример:

const layoutJSON = grid.saveAsJSON({serializeGrid: true});
console.log(JSON.stringify(layoutJSON, null, 2));

Такой подход удобен для гибкой настройки формата данных, особенно при интеграции с бекендом.

Метод getGridItems()

Метод getGridItems() возвращает все DOM-элементы, являющиеся виджетами сетки. Он не возвращает данные о позициях и размерах напрямую, но позволяет работать с узлами через стандартные DOM-операции или методы Gridstack.js:

const items = grid.getGridItems();
items.forEach(item => {
    console.log(item.dataset.gsX, item.dataset.gsY);
});

Каждый элемент содержит атрибуты data-gs-x, data-gs-y, data-gs-width, data-gs-height, что позволяет получить информацию без вызова методов save().

Метод getNode(el)

Метод getNode(el) возвращает объект узла сетки, соответствующий переданному DOM-элементу или jQuery-объекту. Этот объект включает:

  • x, y, width, height
  • id или другие пользовательские свойства
  • Метаданные Gridstack.js о состоянии виджета

Пример:

const node = grid.getNode(document.getElementById('widget1'));
console.log(node.x, node.y, node.width, node.height);

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

Получение позиции и размеров напрямую

Каждый виджет сетки хранит свои координаты в атрибутах DOM-элемента:

  • data-gs-x
  • data-gs-y
  • data-gs-width
  • data-gs-height

Пример чтения этих значений без использования API:

const widget = document.querySelector('#widget1');
const x = parseInt(widget.getAttribute('data-gs-x'), 10);
const y = parseInt(widget.getAttribute('data-gs-y'), 10);
const width = parseInt(widget.getAttribute('data-gs-width'), 10);
const height = parseInt(widget.getAttribute('data-gs-height'), 10);

Этот метод полезен, когда нужно быстро получить данные без инициализации объекта Gridstack.

Получение данных с пользовательскими свойствами

Gridstack.js позволяет хранить кастомные свойства внутри объектов узлов. При использовании save() или saveAsJSON() можно включать эти свойства:

grid.addWidget({
    id: 'widget3',
    x: 1,
    y: 2,
    width: 3,
    height: 2,
    myData: {type: 'chart', color: 'blue'}
});

const data = grid.save();
console.log(data[0].myData); // {type: 'chart', color: 'blue'}

Использование дополнительных свойств облегчает интеграцию с бизнес-логикой приложения и хранение метаданных.

Обход сетки с помощью forEachNode()

Метод forEachNode(callback) позволяет итерировать все узлы сетки и выполнять операции на каждом виджете:

grid.engine.nodes.forEach(node => {
    console.log(`Widget ${node.id} at (${node.x}, ${node.y})`);
});

Или с использованием метода Gridstack.js:

grid.engine.nodes.forEach(node => callback(node));

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

Итоги по методам получения данных

  • save() и saveAsJSON() — получение полной структуры сетки в формате объектов
  • getGridItems() — доступ к DOM-элементам виджетов
  • getNode(el) — получение информации об отдельном виджете
  • data-gs-* атрибуты — быстрый способ чтения координат и размеров
  • Кастомные свойства — расширение информации о виджетах
  • forEachNode() — обход и обработка всех узлов сетки

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

Оглавление