Программное изменение элементов

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

Получение доступа к элементу

Каждый виджет сетки является DOM-элементом с привязанными данными Gridstack. Для программного управления необходимо сначала получить ссылку на сам элемент и объект сетки (GridStack):

const grid = GridStack.init();
const widget = document.querySelector('.grid-stack-item');

Для получения API Gridstack, связанного с конкретным элементом:

const node = grid.getNode(widget);

node содержит текущие координаты (x, y), размеры (w, h) и дополнительные свойства.

Изменение позиции элемента

Позиция виджета задаётся координатами сетки:

grid.update(widget, {x: 2, y: 1});
  • x – горизонтальная позиция в ячейках
  • y – вертикальная позиция в ячейках

Если требуется переместить несколько элементов одновременно, можно использовать массив объектов:

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

Методы batchUpdate() и commit() позволяют избежать перерисовки после каждого изменения, повышая производительность.

Изменение размера элемента

Размер виджета задаётся свойствами w (ширина) и h (высота):

grid.update(widget, {w: 4, h: 3});

Gridstack автоматически пересчитывает соседние элементы, если включена опция float: true или активна автоматическая перестановка (autoPosition: true). Для плавного изменения размеров рекомендуется использовать commit() при множественных изменениях:

grid.batchUpdate();
grid.update(widget1, {w: 2, h: 2});
grid.update(widget2, {w: 3, h: 1});
grid.commit();

Программное добавление элементов

Создание нового виджета возможно динамически через метод addWidget:

const newWidget = grid.addWidget(
  `<div class="grid-stack-item">
     <div class="grid-stack-item-content">Новый блок</div>
   </div>`,
  {x: 0, y: 0, w: 3, h: 2}
);

Можно задать начальные координаты и размеры, а также дополнительные свойства (id, autoPosition).

Добавленные элементы можно сразу модифицировать через update():

grid.update(newWidget, {x: 1, y: 2, w: 4});

Удаление элементов

Для удаления элемента используется метод removeWidget:

grid.removeWidget(widget);

При удалении элемент полностью убирается из DOM и из структуры сетки. Если необходимо временно скрыть элемент, лучше использовать CSS-свойство display или класс .hidden, чтобы сохранить данные виджета.

Управление атрибутами и классами

Gridstack не ограничивает работу с DOM. Для добавления или удаления CSS-классов можно использовать стандартные методы:

widget.classList.add('highlighted');
widget.classList.remove('old-style');

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

widget.querySelector('.grid-stack-item-content').textContent = 'Обновлённый блок';

Получение и установка данных виджета

Объект node содержит все параметры виджета:

const node = grid.getNode(widget);
console.log(node.x, node.y, node.w, node.h);

Для изменения нескольких свойств напрямую через node можно использовать метод grid.update():

grid.update(widget, {x: node.x + 1, w: node.w + 2});

Сохраняются все ключевые характеристики виджета, включая minWidth, maxHeight и locked состояние.

Блокировка и разблокировка элементов

Чтобы запретить пользователю изменять виджет через интерфейс, используется свойство locked:

grid.update(widget, {locked: true});

Для возврата к редактируемому состоянию:

grid.update(widget, {locked: false});

Это особенно полезно для виджетов, положение которых рассчитывается автоматически.

События программного изменения

Gridstack генерирует события при изменении элементов программно или пользователем. Основные события:

  • change — вызывается при перемещении или изменении размера
  • added — новый элемент добавлен
  • removed — элемент удалён
  • resizestop и dragstop — завершение изменения размеров или перемещения

Подписка на события:

grid.on('change', function(event, items) {
    items.forEach(item => console.log(item.x, item.y, item.w, item.h));
});

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

Динамическая перестройка сетки

Gridstack поддерживает полное обновление структуры сетки через commit() и метод makeWidget:

const element = grid.makeWidget('<div class="grid-stack-item"><div class="grid-stack-item-content">Блок</div></div>');
grid.addWidget(element, {x: 0, y: 0, w: 2, h: 2});

Использование batchUpdate() и commit() обеспечивает эффективное внесение нескольких изменений без мерцания и лишних пересчётов.

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

  • Использовать batchUpdate() при множественных изменениях для оптимизации производительности.
  • Для динамически создаваемых виджетов всегда сразу задавать w, h, x, y и autoPosition, чтобы избежать пересечений.
  • Использовать события change и added для синхронизации с серверной логикой.
  • Блокировка (locked) предотвращает случайное смещение ключевых элементов интерфейса.
  • Объект node является источником всех данных о виджете, и через него удобно читать и изменять параметры.

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

Оглавление