Программное управление колонками

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

Настройка количества колонок

Количество колонок задаётся через опцию column при инициализации сетки:

const grid = GridStack.init({
    column: 12
});

Ключевой момент: изменение числа колонок влияет на перераспределение всех виджетов в сетке. Если сетка уже содержит элементы, их позиции будут пересчитаны автоматически, чтобы сохранить видимость и непротиворечивость расположения.

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

grid.column(8); // уменьшение числа колонок до 8

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

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

Для проверки текущей конфигурации используется метод:

let currentColumns = grid.getColumn();
console.log(currentColumns); // выводит текущее число колонок

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

Управление виджетами по колонкам

Каждый виджет в сетке имеет свойства x, y, w и h, где:

  • x — индекс колонки, в которой начинается виджет
  • y — индекс строки, в которой начинается виджет
  • w — ширина виджета в колонках
  • h — высота виджета в строках

Изменение ширины виджета динамически:

const widget = grid.getWidgetById('widget1'); // или любой другой способ получения элемента
grid.update(widget, {w: 6}); // устанавливаем ширину в 6 колонок

Важно: при изменении ширины виджета Gridstack автоматически проверяет доступное пространство и при необходимости перемещает соседние элементы, чтобы избежать наложений.

Перемещение виджетов между колонками

Для программного перемещения используется метод update():

grid.update(widget, {x: 3, y: 1}); // перемещаем виджет в колонку с индексом 3, строку 1

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

Добавление и удаление колонок

Gridstack.js не поддерживает прямого добавления отдельной колонки без изменения общего числа колонок. Любое изменение структуры выполняется через метод column(). Например, для добавления колонок:

grid.column(grid.getColumn() + 2); // увеличиваем число колонок на 2

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

Адаптивное управление колонками

Gridstack.js позволяет интегрировать адаптивные правила. Например, изменение числа колонок при изменении ширины окна:

window.addEventListener('resize', () => {
    if (window.innerWidth < 768) {
        grid.column(4); // мобильный режим
    } else if (window.innerWidth < 1200) {
        grid.column(8); // планшет
    } else {
        grid.column(12); // десктоп
    }
});

Совет: рекомендуется использовать события change и resizestop, чтобы корректно обрабатывать перераспределение виджетов после изменения количества колонок.

Работа с вложенными сетками

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

const nestedGrid = GridStack.init({
    column: 6
}, document.querySelector('.nested-grid'));

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

Методы и события, полезные для работы с колонками

  • grid.column([number]) — установка или получение количества колонок
  • grid.update(el, {x, y, w, h}) — перемещение и изменение размера виджета
  • grid.on('change', callback) — отслеживание изменений позиции и размера виджетов
  • grid.on('resizestop', callback) — фиксация окончательного изменения после ресайза

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

Практические примеры

  1. Сетка с гибкой шириной виджетов:
grid.update(widget, {w: 3});
grid.update(widget2, {w: 4});
  1. Перемещение виджета в крайнюю колонку:
grid.update(widget, {x: grid.getColumn() - widget.getAttribute('gs-w'), y: 0});
  1. Автоматическое изменение колонок под размер окна:
const setColumns = () => {
    const width = window.innerWidth;
    grid.column(width < 600 ? 2 : width < 1024 ? 6 : 12);
};
window.addEventListener('resize', setColumns);
setColumns();

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

Оглавление