Статический режим

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

Включение статического режима

Для активации статического режима используется параметр конфигурации staticGrid. Его можно установить при инициализации сетки:

const grid = GridStack.init({
    staticGrid: true
});
  • true — сетка становится полностью статической, элементы нельзя перемещать или изменять их размеры.
  • false — стандартное поведение сетки с возможностью интерактивного управления виджетами.

Статический режим можно включать и динамически для уже существующей сетки:

grid.setStatic(true);

Аналогично, отключение статического режима выполняется:

grid.setStatic(false);

Ограничение действий в статическом режиме

При staticGrid: true Gridstack.js автоматически блокирует следующие возможности:

  1. Перетаскивание виджетов — элементы остаются на своих позициях.
  2. Изменение размеров — отключаются «ручки» изменения размера.
  3. Удаление виджетов через UI — удаление кнопкой или перетаскиванием на область удаления становится невозможным.
  4. Добавление новых виджетов через drag&drop — новые элементы нельзя добавлять напрямую из интерфейса.

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

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

Статический режим и адаптивность

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

  • Панелей дашбордов с фиксированными блоками.
  • Отображения контента без возможности редактирования.
  • Рендеринга предварительно сконфигурированных макетов.

Влияние на события

Некоторые события Gridstack.js зависят от интерактивности:

  • dragstart, dragstop — не вызываются для виджетов в статическом режиме.
  • resizestart, resizestop — также не активны.
  • added, removed, change — остаются доступными, если виджеты изменяются программно через API.

Пример подписки на изменение сетки в статическом режиме:

grid.on('change', function(event, items) {
    console.log('Изменения сетки', items);
});

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

Использование с отдельными виджетами

Статический режим может быть применён не только к всей сетке, но и к отдельным элементам с помощью опции noMove и noResize при добавлении виджета:

grid.addWidget('<div class="grid-stack-item"><div class="grid-stack-item-content">Элемент</div></div>', {
    x:0, y:0, width:2, height:2, noMove: true, noResize: true
});

Таким образом, можно комбинировать:

  • Сетку в интерактивном режиме с отдельными фиксированными элементами.
  • Полностью статическую сетку.
  • Частично статическую сетку с динамическими зонами.

Примеры практического применения

  1. Дашборды для просмотра данных Отображение информации, где пользователь не должен изменять расположение графиков.

  2. Сервисы с готовыми шаблонами Возможность подготовить макет, который остаётся фиксированным для всех пользователей.

  3. Отчётные страницы Фиксированные таблицы и панели, где интерактивность не нужна, но адаптивность требуется.

Рекомендации при использовании статического режима

  • Использовать staticGrid для случаев, когда изменение структуры сетки пользователем не требуется.
  • Для гибридных решений комбинировать staticGrid и опции noMove/noResize на отдельных виджетах.
  • Проверять адаптивность при разных разрешениях экрана, так как статический режим не отключает автоматическое перераспределение элементов.

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

Оглавление