Полный список статических методов

В библиотеке GridStack.js статические методы предоставляют функциональность, доступную напрямую через объект GridStack, без необходимости создавать экземпляр сетки. Эти методы позволяют управлять глобальными настройками, взаимодействовать с DOM-элементами и создавать новые сетки программно.

GridStack.init(options, container)

Метод init используется для создания новой сетки или инициализации существующей HTML-разметки как сетки GridStack. Параметры:

  • options — объект конфигурации сетки. Включает параметры:

    • cellHeight — высота ячейки (число или строка с единицами, например '100px').
    • verticalMargin — вертикальный отступ между виджетами.
    • column — количество колонок сетки.
    • staticGrid — если true, виджеты нельзя перемещать и изменять размер.

  • container — DOM-элемент или селектор контейнера сетки.

Возвращает: экземпляр GridStack.

Пример использования:

const grid = GridStack.init({column: 12, cellHeight: 80}, '#myGrid');

GridStack.addWidget(el, options)

Добавляет виджет в контейнер сетки. Может работать как с DOM-элементом, так и с HTML-строкой.

Параметры:

  • el — DOM-элемент или HTML-разметка виджета.

  • options — объект с настройками позиции и размера:

    • x, y — координаты в сетке.
    • width, height — размер виджета в ячейках.
    • autoPosition — если true, виджет будет размещён автоматически.

Возвращает: добавленный DOM-элемент виджета.

Пример:

GridStack.addWidget('<div class="grid-stack-item"><div class="grid-stack-item-content">Новый виджет</div></div>', {x:0, y:0, width:3, height:2});

GridStack.removeWidget(el, removeDOM = true, triggerEvent = true)

Удаляет виджет из сетки.

Параметры:

  • el — DOM-элемент виджета.
  • removeDOM — если true, удаляет элемент из DOM.
  • triggerEvent — если true, вызывает событие removed.

Пример:

GridStack.removeWidget(document.querySelector('.grid-stack-item'));

GridStack.makeWidget(el)

Метод превращает обычный DOM-элемент в виджет сетки, добавляя необходимые классы и структуру.

Параметры:

  • el — DOM-элемент или HTML-разметка.

Пример:

const widget = GridStack.makeWidget(document.createElement('div'));

GridStack.isAreaEmpty(grid, x, y, width, height)

Проверяет, свободна ли область в сетке.

Параметры:

  • grid — экземпляр сетки или контейнер.
  • x, y — координаты верхнего левого угла.
  • width, height — размеры области в ячейках.

Возвращает: true, если область свободна, иначе false.

GridStack.engineUpdateNode(el, node)

Обновляет данные узла (node) виджета. Позволяет изменять положение и размер виджета без пересоздания.

Параметры:

  • el — DOM-элемент виджета.

  • node — объект с новыми свойствами:

    • x, y, width, height, autoPosition, id.

Пример:

GridStack.engineUpdateNode(widgetEl, {x:1, y:2, width:4, height:2});

GridStack.getElementNode(el)

Возвращает объект узла (node) для переданного DOM-элемента виджета.

Параметры:

  • el — DOM-элемент виджета.

Возвращает: объект с параметрами x, y, width, height, id.

GridStack.compact(nodes, column)

Компактирует массив узлов, выравнивая виджеты по вертикали. Полезно при удалении виджетов или изменении колонок сетки.

Параметры:

  • nodes — массив объектов узлов.
  • column — количество колонок сетки.

Возвращает: новый массив узлов с обновлёнными координатами.

GridStack.Utils — вспомогательные методы

GridStack предоставляет набор утилитарных функций для работы с DOM и массивами узлов:

  • GridStack.Utils.sort(nodes) — сортирует массив узлов по координатам y и x.
  • GridStack.Utils.clone(obj) — глубокое копирование объекта.
  • GridStack.Utils.css(el, styles) — применяет стили к элементу.
  • GridStack.Utils.addStylesheetString(css) — добавляет CSS-правила динамически.

GridStack.addResizeHandle(el, direction)

Добавляет элементу виджета ручку изменения размера.

Параметры:

  • el — DOM-элемент виджета.
  • direction — направление ручки ('se', 'sw', 'ne', 'nw').

Пример:

GridStack.addResizeHandle(widgetEl, 'se');

GridStack.batchUpdate(grid, callback)

Позволяет выполнять несколько изменений в сетке без перерисовки после каждой операции.

Параметры:

  • grid — экземпляр сетки.
  • callback — функция с операциями над виджетами.

Пример:

GridStack.batchUpdate(grid, () => {
  GridStack.addWidget('<div class="grid-stack-item"><div class="grid-stack-item-content">Виджет 1</div></div>');
  GridStack.addWidget('<div class="grid-stack-item"><div class="grid-stack-item-content">Виджет 2</div></div>');
});

Особенности статических методов

  1. Глобальный доступ — методы доступны через объект GridStack без создания экземпляра.
  2. Работа с DOM — многие методы напрямую изменяют HTML-структуру.
  3. Гибкость — позволяют программно добавлять, удалять и обновлять виджеты.
  4. Оптимизация производительности — методы вроде batchUpdate минимизируют количество перерисовок.

Статические методы GridStack.js образуют мощный инструмент для динамического управления сеткой и интеграции с существующим DOM. Они предоставляют полный контроль над расположением, размерами и структурой виджетов.

Оглавление