Создание вложенных сеток

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

Вложенные сетки создаются путем инициализации Gridstack внутри элемента, который уже является частью родительской сетки. Основное правило — контейнер вложенной сетки должен быть внутри блока родительской сетки, иначе управление положением и размерами будет некорректным.

Инициализация вложенной сетки

// Инициализация родительской сетки
const parentGrid = GridStack.init({
  column: 12,
  margin: 10
}, '#parent-grid');

// Добавление элемента с вложенной сеткой
parentGrid.addWidget(`
  <div class="grid-stack-item">
    <div class="grid-stack-item-content">
      <div class="nested-grid"></div>
    </div>
  </div>
`);

// Инициализация вложенной сетки
const nestedGrid = GridStack.init({
  column: 6,
  margin: 5,
  staticGrid: false
}, '.nested-grid');

Ключевые моменты:

  • nestedGrid работает независимо от parentGrid, но размеры родительского блока влияют на видимую область.
  • Настройка column и margin для вложенной сетки может отличаться от родительской.
  • Параметр staticGrid управляет возможностью перетаскивания внутри вложенной сетки.

Добавление и управление элементами вложенной сетки

Элементы вложенной сетки добавляются точно так же, как в обычной сетке:

nestedGrid.addWidget(`
  <div class="grid-stack-item" gs-w="3" gs-h="2">
    <div class="grid-stack-item-content">Вложенный блок 1</div>
  </div>
`);

nestedGrid.addWidget(`
  <div class="grid-stack-item" gs-w="3" gs-h="2">
    <div class="grid-stack-item-content">Вложенный блок 2</div>
  </div>
`);

Параметры gs-w и gs-h определяют ширину и высоту блока в единицах колонок и строк.

Для динамического изменения положения и размера используется API:

const item = nestedGrid.getGridItems()[0];
nestedGrid.update(item, {x: 1, y: 0, w: 4, h: 2});

Особенности взаимодействия родительской и вложенной сеток

  1. Перетаскивание элементов

    • Перетаскивание внутри вложенной сетки не влияет на родительскую сетку.
    • Можно настроить взаимодействие, позволяя перемещать элементы из вложенной сетки в родительскую через опцию dragIn.

  2. Изменение размеров

    • Изменение размеров блока во вложенной сетке не изменяет размеры родительского блока автоматически.
    • Для синхронизации размеров можно использовать события change или resizestop:
nestedGrid.on('change', function(event, items) {
  items.forEach(item => {
    console.log(`Элемент ${item.el.textContent} изменён`);
  });
});

  1. События и колбэки

    • Вложенная сетка поддерживает все стандартные события Gridstack.js: added, removed, change, dragstart, dragstop.
    • Можно использовать делегирование событий для управления всеми уровнями сетки.

Практическая организация вложенных сеток

Для сложных интерфейсов удобно использовать фиксированные шаблоны вложенных сеток:

const nestedTemplate = `
<div class="grid-stack-item">
  <div class="grid-stack-item-content">
    <div class="nested-grid">
      <div class="grid-stack-item" gs-w="2" gs-h="1">
        <div class="grid-stack-item-content">Блок A</div>
      </div>
      <div class="grid-stack-item" gs-w="2" gs-h="1">
        <div class="grid-stack-item-content">Блок B</div>
      </div>
    </div>
  </div>
</div>
`;

parentGrid.addWidget(nestedTemplate);
GridStack.init({column: 4, margin: 5}, '.nested-grid');

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

Советы по производительности

  • Для больших сеток с множеством вложенных элементов важно ограничивать количество одновременно активных событий.
  • Использование staticGrid: true для вложенных сеток, если элементы не должны двигаться, значительно улучшает производительность.
  • Если элементы вложенной сетки не должны выходить за границы родителя, рекомендуется включить float: false и использовать minW/minH для контроля размеров.

Стилизация вложенных сеток

CSS для вложенных сеток требует учета размера контейнера:

.nested-grid {
  background: #f0f0f0;
  padding: 5px;
  min-height: 100px;
}
.grid-stack-item-content {
  background: #d0d0ff;
  border: 1px solid #999;
  display: flex;
  align-items: center;
  justify-content: center;
}

Особенности визуального представления:

  • Родительская сетка может иметь один стиль, вложенная — другой, для наглядного разделения блоков.
  • Настройка padding и margin предотвращает пересечение элементов и делает интерфейс более читабельным.

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

Оглавление