Методы обновления сетки

Gridstack.js предоставляет мощный и гибкий API для работы с динамическими сетками, позволяя изменять структуру сетки и её элементы в реальном времени. Методы обновления сетки делятся на несколько категорий: управление положением и размерами элементов, добавление и удаление виджетов, а также реакция на изменения состояния сетки.

Изменение положения и размеров виджетов

Gridstack.js хранит информацию о каждом виджете через объект GridStackNode. Для изменения параметров используется метод update().

Синтаксис:

grid.update(el, {x: 2, y: 3, width: 4, height: 2});
  • el — DOM-элемент или объект GridStackNode.
  • x, y — новые координаты виджета в сетке.
  • width, height — новые размеры виджета.

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

  • Если указанные координаты пересекаются с другими виджетами, Gridstack автоматически перемещает конфликтующие элементы.
  • Изменение размеров через update также может вызвать событие change на сетке.

Добавление новых виджетов

Для динамического добавления элементов используется метод addWidget(). Он принимает HTML-разметку виджета и объект конфигурации.

Пример:

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

Параметры конфигурации включают:

  • x, y — координаты на сетке.
  • width, height — размеры виджета.
  • autoPosition — автоматическое определение позиции, если координаты не заданы.

Важно: добавление виджета обновляет внутреннее состояние сетки и автоматически рендерит элемент в DOM.

Удаление виджетов

Удаление элементов выполняется методом removeWidget(). Он принимает DOM-элемент виджета или его идентификатор.

Пример:

grid.removeWidget(el, true);
  • Второй параметр true указывает на немедленное удаление из DOM без анимации.
  • Если параметр не указан, виджет может быть удален с плавной анимацией.

Массовое обновление виджетов

Gridstack позволяет одновременно обновлять несколько виджетов с помощью метода batchUpdate(). Этот подход уменьшает количество перерасчётов сетки и оптимизирует производительность при больших изменениях.

Пример:

grid.batchUpdate();
grid.update(el1, {x:1, y:0});
grid.update(el2, {width:4});
grid.commit();
  • batchUpdate() — начинает пакетное обновление.
  • commit() — применяет все изменения сразу, пересчитывая позиции всех виджетов один раз вместо многократных пересчётов.

Изменение конфигурации сетки в реальном времени

Метод setOptions() позволяет менять параметры сетки, такие как количество колонок, отступы и поведение drag-and-drop, без полной перезагрузки сетки.

Пример:

grid.setOptions({
  column: 12,
  margin: 10,
  float: true
});
  • column — количество колонок в сетке.
  • margin — отступы между элементами.
  • float — разрешение свободного перемещения виджетов без привязки к сетке.

Реакция на события изменений

Gridstack.js генерирует события при изменении состояния сетки:

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

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

grid.on('change', function(event, items) {
    console.log('Обновленные виджеты:', items);
});

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

Перерисовка сетки

Метод engine.nodes или compact() помогает вручную перераспределить виджеты и устранить пустые места после массового обновления:

grid.compact();
  • compact() — автоматически сжимает сетку, перемещая виджеты вверх или влево.
  • Полезно после динамического удаления нескольких элементов, чтобы сохранить аккуратную структуру сетки.

Итоговая схема работы методов обновления

  1. Обновление конкретного виджета: update().
  2. Добавление: addWidget().
  3. Удаление: removeWidget().
  4. Массовые изменения: batchUpdate() + commit().
  5. Перенастройка сетки: setOptions().
  6. Оптимизация структуры: compact().
  7. Подписка на события: on('change'), on('added'), on('removed').

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

Оглавление