Процесс обновления

Gridstack.js предоставляет мощный инструмент для построения динамических сеток с перетаскиваемыми и изменяемыми по размеру виджетами. Основной объект сетки создается с помощью метода GridStack.init(options, container), где options задают параметры сетки, а container — DOM-элемент-контейнер. После инициализации сетка становится готовой к динамическому добавлению, удалению и изменению элементов.

Обновление сетки может потребоваться в нескольких случаях: изменение размеров контейнера, добавление новых виджетов, синхронизация состояния с внешними данными. В Gridstack.js для этого используется метод grid.update(), который пересчитывает позиции виджетов и их размеры в соответствии с текущими настройками и ограничениями.

const grid = GridStack.init({ cellHeight: 100, float: true });
grid.update();

update() автоматически учитывает свойства minWidth, maxWidth, minHeight, maxHeight каждого виджета и корректно переставляет их, чтобы не возникало наложений.

Динамическое добавление и изменение виджетов

Для добавления новых виджетов используется метод grid.addWidget(el, options), где el — DOM-элемент виджета, а options позволяют задать начальные координаты и размеры:

grid.addWidget('<div class="grid-stack-item"><div class="grid-stack-item-content">Новый виджет</div></div>', {x:0, y:0, width:2, height:2});

Если требуется обновить существующий виджет, применяется метод update() конкретного элемента:

const widget = grid.getWidget(el); // Получение объекта виджета по DOM-элементу
grid.update(widget, {width:3, height:3, x:1, y:1});

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

Управление размерами и позициями

Gridstack.js хранит положение и размер каждого виджета в свойствах x, y, width и height. Эти значения обновляются автоматически при перетаскивании и изменении размера виджетов. Для программного обновления можно использовать методы:

  • grid.update(el, opts) — обновление конкретного элемента.
  • grid.batchUpdate() / grid.commit() — пакетное обновление нескольких виджетов с минимизацией перерасчета позиций.
grid.batchUpdate();
grid.update(widget1, {width:2, height:4});
grid.update(widget2, {x:3, y:0});
grid.commit();

Использование batchUpdate особенно полезно при синхронизации сетки с серверными данными или при массовом изменении виджетов, так как предотвращает множественные перерисовки и повышает производительность.

События обновления

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

  • change — вызывается при любом изменении позиции или размера виджетов.
  • added / removed — срабатывает при добавлении или удалении виджетов.
  • resizestop / dragstop — фиксируют завершение изменения размера или перемещения.

Пример подписки на событие изменения:

grid.on('change', function(event, items) {
  items.forEach(function(item) {
    console.log(`Виджет ${item.id} перемещен в (${item.x}, ${item.y})`);
  });
});

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

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

Для долговременного хранения состояния сетки используется метод save():

const serializedData = grid.save(); // Получение массива с данными виджетов

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

grid.load(serializedData);

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

Поддержка адаптивного дизайна

Gridstack.js автоматически пересчитывает позиции виджетов при изменении размеров контейнера, если включена опция cellHeight: 'auto' или используется resizable: true. Для динамического обновления после изменения размера окна применяется метод grid.compact() или grid.update():

window.addEventListener('resize', () => {
  grid.update();
});

Метод compact() упорядочивает виджеты, удаляя пустые промежутки, что особенно полезно после массового удаления или добавления виджетов.

Интеграция с внешними данными

Gridstack.js позволяет обновлять сетку на основе данных из API или базы данных. Для этого обычно используется комбинация removeAll(), addWidget() и update():

grid.removeAll();
dataFromServer.forEach(item => {
  grid.addWidget(`<div class="grid-stack-item"><div class="grid-stack-item-content">${item.title}</div></div>`, item);
});
grid.update();

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

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

Оглавление