Question

我正在使用带有反应的ag-grid。我有一个非树网格和树网格。我希望能够在两者中重新排序，在树状网格中重新父级化，并在网格之间拖动。我遇到了两个特别的问题，不确定ag-grid是否支持我的用例。

当从一个网格拖到另一个网格时，我可以使用以下方法从一个网格中获取放置区参数，然后在另一个网格上进行设置。

const grid1DropzoneParams = {
  onDragging: (e) => console.log('onDragging - grid1', {...e}),
  onDragEnter: (e) => console.log('onDragEnter - grid1', {...e}),
  onDragLeave: (e) => console.log('onDragLeave - grid1', {...e}),
  onDragStop: (e) => console.log('onDragStop - grid1', {...e}),
  getContainer: grid1Api.getRowDropZoneParams().getContainer,
};
grid2Api.addRowDropZone(grid1DropzoneParams);

不幸的是，如果从一个网格移到另一个网格，则e.overNode的值设置不正确。它为null或引用源网格中的值（在这种情况下，grid2中的某个实体而不是将实际实体悬停在grid1中）。结果，当我从一个网格拖动到另一个网格时，我无法确定我要拖动哪个项目（或之间）。

在我在文档中找到的ag-grid示例中，我仅看到有关在网格为常规存储桶的情况下从网格拖动到网格的引用，而不是能够从一个网格拖动并在另一个网格中重新排序/替代原子操作（或换句话说，在从网格到网格的初始拖动期间选择源实体在目标网格中的位置）。我唯一的选择是使用源网格上的dndSource=true手动完全处理dnd吗？ dndSource与rowDrag的搭配效果不佳，这意味着即使在网格内，我也需要手动处理所有DnD（我相信）。

有些相关，但可能值得一个单独的问题，我无法在树状网格中重新排序。我可以通过拖动而不是在两个同级之间（或列表的顶部/底部）拖动来重新父级。再说一次，我能找到的唯一的农业网格示例是树网格，显示了重新父级化，而不是在父级内或父级之间重新排序。

Answer 1

我在这里找到了解决方案，以防万一。我正在使用rowDrag=true和一个外部dropzone。为了使实体被拖到外部网格上，我使用以下命令（其中gridApiRef是对网格api的react ref）

const getAgGridNodeBeingDraggedOver(dragEvent) {
  const elements = document.elementsFromPoint(
    dragEvent.event.clientX,
    dragEvent.event.clientY
  )
  const agGridRow = elements.find((r) => r.classList.contains('ag-row'))
  if (agGridRow) {
    const idOfRow = agGridRow.getAttribute('row-id')
    const rowNode = gridApiRef.current.getRowNode(idOfRow)
    return rowNode
  }
  return null
}

Answer 2

我有同样的问题，正在通过使用

解决

const rowElement = args.event.srcElement.closest('[role=row]');
if (rowElement) {
    const id = rowElement.getAttribute('row-id');
    const targetNode = this.gridOptions.api.getRowNode(id);
}

React Ag-Grid-在将网格拖动到网格时识别超节点

2 个答案: