Методы управления сеткой

Gridstack.js предоставляет возможность динамического создания и управления сеткой виджетов (widgets) с поддержкой перетаскивания и изменения размеров. Для создания сетки используется конструктор:

const grid = GridStack.init({
    column: 12,
    cellHeight: 80,
    verticalMargin: 10,
    disableOneColumnMode: false,
    float: false
});

Ключевые параметры:

  • column — количество колонок сетки.
  • cellHeight — высота ячейки сетки в пикселях.
  • verticalMargin — вертикальный отступ между элементами.
  • disableOneColumnMode — отключение автоматического перехода в режим одной колонки при малых ширинах экрана.
  • float — позволяет элементам свободно «плавать» при перемещении.

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

Gridstack.js поддерживает динамическое управление элементами. Для добавления виджета используется метод addWidget:

grid.addWidget('<div class="grid-stack-item" gs-x="0" gs-y="0" gs-width="4" gs-height="2"><div class="grid-stack-item-content">Контент</div></div>');

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

  • gs-x и gs-y — координаты в сетке.
  • gs-width и gs-height — размеры виджета в ячейках.
  • addWidget возвращает объект виджета для дальнейшей работы.

Удаление виджета осуществляется методом removeWidget:

const widget = document.querySelector('.grid-stack-item');
grid.removeWidget(widget, true);

Параметр true позволяет удалить виджет из DOM полностью.

Перетаскивание и изменение размеров

Gridstack.js предоставляет API для управления возможностью перемещения и изменения размеров:

grid.enableMove(document.querySelector('.grid-stack-item'));
grid.disableMove(document.querySelector('.grid-stack-item'));
grid.enableResize(document.querySelector('.grid-stack-item'));
grid.disableResize(document.querySelector('.grid-stack-item'));

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

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

Состояние сетки хранит информацию о положении и размере всех элементов. Для получения текущего состояния используется:

const serialized = grid.save();
console.log(serialized);

Метод save() возвращает массив объектов:

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

Для восстановления состояния:

grid.load(serialized);

load() очищает текущие виджеты и размещает элементы согласно сохранённым координатам и размерам.

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

Gridstack.js позволяет изменять параметры виджетов напрямую:

const widget = document.querySelector('.grid-stack-item');
grid.update(widget, {x:1, y:2, width:6, height:3});

Метод update поддерживает:

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

Для перемещения виджета без изменения размера используется метод move:

grid.move(widget, 2, 3);

Управление колонками и адаптивностью

Количество колонок в сетке можно изменять динамически:

grid.column(8); // сетка теперь 8 колонок

При изменении количества колонок Gridstack.js автоматически перераспределяет виджеты, сохраняя их относительные позиции. Для управления адаптивностью используется опция oneColumnMode:

grid.on('change', function(event, items) {
    console.log('Элементы изменены:', items);
});

Эта конструкция позволяет отслеживать перемещение и изменение размеров всех виджетов.

Работа с событиями

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

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

Пример подписки:

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

Упрощение управления группой виджетов

Методы batchUpdate и commit позволяют оптимизировать изменения множества виджетов:

grid.batchUpdate();
grid.update(widget1, {x:1, y:1});
grid.update(widget2, {x:5, y:0});
grid.commit();

batchUpdate() приостанавливает обновление DOM и перерасчет сетки, что особенно полезно при массовых изменениях.

Работа с пустыми ячейками и плотностью

Методы compact() и removeEmpty() позволяют управлять плотностью сетки:

grid.compact(); // уплотняет сетку, сдвигая виджеты вверх
grid.removeEmpty(); // удаляет пустые строки и столбцы

compact() автоматически устраняет пустое пространство между виджетами, сохраняя их порядок.

Управление видимостью и слоями

Gridstack.js поддерживает управление z-index и видимостью виджетов:

grid.getWidgetElements().forEach(widget => {
    widget.style.display = 'none'; // скрыть виджет
});

Для восстановления отображения:

widget.style.display = '';

getWidgetElements() возвращает массив всех DOM-элементов сетки, что удобно для массового управления.

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

Gridstack.js позволяет связывать виджеты с объектами данных. Используя data-gs-id можно сохранять уникальные идентификаторы:

<div class="grid-stack-item" data-gs-id="widget1"></div>

При сериализации:

const state = grid.save(false, true); // вторым аргументом сохраняются data-атрибуты

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

Оптимизация производительности

Для больших сеток рекомендуется:

  • Использовать batchUpdate() при множественных изменениях.
  • Ограничивать количество DOM операций.
  • Подписываться на события только при необходимости.
  • Использовать disableOneColumnMode для предотвращения лишних перерасчетов на мобильных устройствах.

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

Оглавление