Вопрос или проблема
Я пытаюсь найти решение, чтобы перетаскивать строку из сетки 1 в сгруппированную строку в сетке 2.
Например:
Сетка 1 содержит информацию об адресе: Улица, номер, город
Сетка 2 содержит тип + информацию об адресе: Тип, улица, номер, город. Сетка 2 сгруппирована по типу, поэтому информация об адресе сгруппирована/привязана к конкретному типу.
Я хочу перетащить информацию об адресе из сетки 1 под сгруппированную строку (например, тип 1), и она должна быть добавлена под сгруппированной строкой типа 1.
Я пытался выяснить, возможно ли это с помощью версии Enterprise ag grid. К сожалению, я могу только найти, что можно перетаскивать строки в другую сетку и группировать строки. Но нет примера, как перетаскивать строки в сгруппированную строку. Насколько я знаю, вы можете только использовать applyTransaction для добавления/удаления, но не в сгруппированной строке.
Может кто-то поправить меня, если я не прав, и, возможно, предоставить пример того, как этого добиться?
Ответ или решение
Конечно! Для решения задачи перетаскивания строк с одной таблицы (Grid 1) на сгруппированную строку в другой таблице (Grid 2) с использованием ag-Grid, вам нужно будет реализовать несколько ключевых моментов. Важно отметить, что перетаскивание строк в сгруппированные ряды в ag-Grid поддерживается, но требует правильной настройки.
Шаги для реализации
-
Настройка обеих таблиц: Убедитесь, что ваши таблицы (Grid 1 и Grid 2) правильно настроены для поддержки перетаскивания строк. Для этого вам необходимо будет включить функции
rowDragиrowDragManaged. -
Настройка Grid 1: В первой таблице добавьте колонку с настройкой
rowDrag:
const gridOptions1 = {
columnDefs: [
{ headerName: 'Street', field: 'street', rowDrag: true },
{ headerName: 'Number', field: 'number' },
{ headerName: 'City', field: 'city' }
],
rowData: [
{ street: 'Main St.', number: '123', city: 'City A' },
// другие адреса
],
rowDragManaged: true,
animateRows: true,
};- Настройка Grid 2: Для второй таблицы нужно сгруппировать данные по типу. Позаботьтесь о том, чтобы включить настройку
groupв колонках.
const gridOptions2 = {
columnDefs: [
{ headerName: 'Type', field: 'type', rowGroup: true },
{ headerName: 'Street', field: 'street' },
{ headerName: 'Number', field: 'number' },
{ headerName: 'City', field: 'city' }
],
rowData: [
{ type: 'Type 1', street: 'Side St.', number: '456', city: 'City B' },
// другие типы
],
animateRows: true,
onRowDragEnd: onRowDragEnd,
};- Обработка события перетаскивания: Вам нужно создать функцию, которая будет обрабатывать перемещение строки из первой таблицы во вторую. В этой функции будет добавлено новое адресное значение в соответствующий сгруппированный тип. Пример реализации:
function onRowDragEnd(event) {
const draggedData = event.node.data;
const targetRowNode = event.overNode;
if (targetRowNode && targetRowNode.group) { // Проверка, что перетаскиваем на сгруппированную строку
const groupType = targetRowNode.data.type;
// Создаем объект для добавления
const newAddress = {
type: groupType,
street: draggedData.street,
number: draggedData.number,
city: draggedData.city
};
// Добавляем новый адрес в rowData Grid 2
const gridApi2 = gridOptions2.api;
gridApi2.applyTransaction({ add: [newAddress] });
}
}- Обновление данных: Не забудьте обновить данные в Grid 2, чтобы они отобразились корректно после перетаскивания.
Заключение
Таким образом, можно реализовать функциональность перетаскивания строк из одной таблицы в другую с учетом группировки. Данная реализация учитывает перетаскивание под сгруппированные строки, что позволяет динамически добавлять новые адреса к соответствующему типу. Убедитесь, что у вас установлена соответствующая версия ag-Grid, которая поддерживает указанные функции.