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

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

Методы для удаления элементов

Gridstack предоставляет несколько способов удаления виджетов:

  1. removeWidget(el, removeDOM = true, triggerEvent = true) Основной метод для удаления виджетов. Параметры:

    • el – DOM-элемент или jQuery-объект, представляющий виджет.
    • removeDOM (по умолчанию true) – определяет, будет ли удалён элемент из DOM. Если false, виджет останется в DOM, но будет удалён из внутренней структуры Gridstack.
    • triggerEvent (по умолчанию true) – определяет, будет ли инициировано событие removed.

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

    const grid = GridStack.init();
const widget = document.querySelector('.grid-stack-item[data-gs-id="1"]');
grid.removeWidget(widget);

    В этом примере виджет с атрибутом data-gs-id="1" полностью удаляется из сетки и DOM.

  2. Удаление всех виджетов одновременно – removeAll() Метод удаляет все виджеты из сетки. Параметр removeDOM работает аналогично removeWidget.

    const grid = GridStack.init();
grid.removeAll(); // удаляет все виджеты и очищает DOM

  3. Удаление без событий – removeWidget с triggerEvent = false Иногда требуется удалить элемент без генерации событий, например, при массовом обновлении сетки:

    grid.removeWidget(widget, true, false);

Работа с jQuery и Vanilla JS

Gridstack поддерживает как чистый JavaScript, так и jQuery. Если используется jQuery:

const $widget = $('.grid-stack-item[data-gs-id="2"]');
grid.removeWidget($widget);

Метод корректно определяет элемент и удаляет его, при этом обновляя внутреннее состояние сетки.

События удаления

Удаление виджетов инициирует событие removed, которое можно перехватывать:

grid.on('removed', function(event, items) {
    items.forEach(item => console.log('Удалён виджет:', item.el));
});
  • event – объект события
  • items – массив удалённых виджетов с информацией о их положении и размере (x, y, w, h)

События особенно полезны для синхронизации состояния сетки с сервером или локальным хранилищем.

Программное удаление с сохранением данных

Если необходимо удалить виджет, но сохранить его данные для последующего восстановления, рекомендуется использовать removeWidget с removeDOM = false:

const widget = document.querySelector('.grid-stack-item[data-gs-id="3"]');
grid.removeWidget(widget, false); // виджет остаётся в DOM, но исчезает из сетки

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

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

Иногда требуется удалить несколько виджетов по определённому условию, например, по классу или типу контента:

const widgets = grid.engine.nodes.filter(node => node.el.classList.contains('removable'));
widgets.forEach(node => grid.removeWidget(node.el));
  • grid.engine.nodes – массив всех виджетов сетки с полными данными о положении и размере.
  • Такой подход позволяет гибко управлять содержимым сетки, удаляя только нужные элементы.

Удаление и оптимизация сетки

После массового удаления рекомендуется вызвать grid.compact(), чтобы перераспределить оставшиеся виджеты и устранить пустые промежутки:

grid.removeAll();
grid.compact(); // перераспределение оставшихся виджетов

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

Резюме особенностей

  • removeWidget – удаление отдельного виджета.
  • removeAll – удаление всех виджетов.
  • triggerEvent позволяет контролировать генерацию событий.
  • removeDOM = false сохраняет элемент в DOM для последующего восстановления.
  • Возможность фильтрации виджетов через grid.engine.nodes предоставляет гибкость при массовых операциях.
  • Вызов compact() после удаления оптимизирует расположение оставшихся элементов.

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

Оглавление