Angular/ts 行从一个网格拖动到另一个分组的行网格

Question

我正在尝试找到一种解决方案，将行从网格 1 拖动到网格 2 中的分组行。

例如：

网格 1 有地址信息：街道、号码、城市

网格2有类型+地址信息：类型、街道、号码、城市 网格 2 按类型分组，因此地址信息被分组/附加到特定类型。

我想将地址信息从网格1拖到分组行下（例如类型1），并且应该将其添加到分组行类型1下

我试图找出企业版的 ag grid 是否可以实现这一点。遗憾的是，我只能发现您可以将行拖动到另一个网格，并且可以对行进行分组。但没有示例说明如何将行拖动到分组行。因为据我所知，您只有 applyTransaction 添加/删除，但没有在分组行上。

如果我错了，有人可以纠正我吗？也许可以提供一个如何实现这一目标的示例？

Answer 1

听起来您正在寻求将行拖放功能与 AG 网格中的分组相结合，特别是将行从一个网格拖动到另一个网格，同时保持其分组。这确实可以使用 AG Grid 的企业版来实现，但它需要一些自定义逻辑，因为默认示例通常处理网格之间的基本行拖放，而不考虑分组。

a/c 对我来说：你应该尝试启用跨网格的行拖动： 在网格 1 中，为将发生拖动的列设置 rowDrag 属性。

 {
    field: 'street',
    rowDrag: true,
  }

在网格 2 中，您已经拥有按类型（类型 1、类型 2 等）分组的行。使用AG Grid的分组功能：

 {
    groupDisplayType: 'groupRows',
    rowGroup: true,
  }

由于 AG Grid 本身不处理将行拖放到分组行中，因此您需要侦听拖放事件，然后手动应用事务以将拖放的行插入到正确的组中。

为了实现此目的，您将侦听网格 1 上的 rowDragEnd 事件，然后根据分组以编程方式确定将行插入到网格 2 中的位置。

您可以这样做（这应该有效）：

// Grid 1 (Source Grid)
const gridOptions1 = {
  columnDefs: [
    { field: 'street', rowDrag: true },
    { field: 'number' },
    { field: 'city' }
  ],
  onRowDragEnd: function(event) {
    const draggedData = event.node.data;
    
    // Custom logic to figure out which group the row was dropped on
    const groupType = 'Type 1'; // You need to determine this dynamically

    const transaction = {
      add: [{
        type: groupType,
        street: draggedData.street,
        number: draggedData.number,
        city: draggedData.city
      }]
    };
    
    gridOptions2.api.applyTransaction(transaction);
  }
};

// Grid 2 (Target Grid)
const gridOptions2 = {
  columnDefs: [
    { field: 'type', rowGroup: true },
    { field: 'street' },
    { field: 'number' },
    { field: 'city' }
  ],
  defaultColDef: {
    flex: 1,
    minWidth: 100,
    resizable: true
  },
  groupDisplayType: 'groupRows',
  rowData: initialDataForGrid2
};

步骤摘要：

1. 在网格 1 中启用 rowDrag。
2. 在网格 2 中启用分组。
3. 监听网格 1 中的 rowDragEnd 事件。
4. 根据行所在位置确定网格 2 中的目标组 掉下来了。
5. 在 Grid 2 中使用 applyTransaction 在下面添加新行 正确的组。