ag-grid

Question

例如，我有一个 Master\Detail 网格。

Master\Detail defined as key-relation model and on getDetailRowData method parent node data exists in params

但是如何从子视图中获取父节点数据？

Tried via context-menu:

右键单击 - getContextMenuItems 得到执行，其中有一个输入 params

在这个示例中，child-grid 没有任何行，context-params 中的 node 为 null，没关系， 但无论如何，至少应该可以通过网格检索父详细信息 API，不是吗？

然后我尝试通过节点获取 parent：但是你看到的不是 detail_173 ROOT_NODE_ID，这让我很困惑。

所以问题是如何通过子视图上下文菜单或任何其他可能的方式（不存储临时值，因为可以同时打开多个子节点）获取父节点数据（RecordID 173 以防万一）

是的，我已经阅读了这部分Accessing Detail Grid API，但仍然不清楚如何通过子网格获取父节点。

Answer 1

能够实现。看看我创建的 plunk：Get master record from child record - Editing Cells with Master / Detail

Right click on any child grid's cell, and check the console log. You'll be able to see parent record in the log for the child record on which you've click.

实施有些棘手。我们需要遍历组件代码中的 DOM 。幸运的是 ag-grid 为我们提供了它的访问权限。

从 params 获取子网格的包装器 HTML 节点 - 在代码中，我将其作为 gridOptionsWrapper.layoutElements 数组的第 6 个元素获取。
获取它的第 3 级父元素 - 这是父元素的实际 row。得到它是 row-id.
使用父网格的gridApi.

  getContextMenuItems: (params): void => {
      var masterId = params.node.gridOptionsWrapper.layoutElements[6]
            .parentElement.parentElement.parentElement.getAttribute('row-id');
      // get the parent's id
      var id = masterId.replace( /^\D+/g, '');
      console.log(id);
      var masterRecord = this.gridApi.getRowNode(id).data;
      console.log(masterRecord);
    },
    defaultColDef: { editable: true },
    onFirstDataRendered(params) {
      params.api.sizeColumnsToFit();
  }

注意：主网格的rowId定义为[getRowNodeId]="getRowNodeId"，假设account是父网格的主键。

Answer 2

一个非常可靠的解决方案是创建您自己的 detailCellRenderer.

关于 init 方法：

this.masterNode = params.node.parent;

创建详细信息网格时：

detailGridOptions = {
    ...
    onCellClicked: params => console.log(this.masterNode.data)
}

这里有一个 plunker 证明了这一点： https://next.plnkr.co/edit/8EIHpxQnlxsqe7EO

Answer 3

对于无法访问生命周期方法的 React Hook 用户，使用 Ag-Grid Context 通过 detailGridOptions 将父节点（或父数据）传递到详细信息网格。无需遍历 DOM 或使用 detailCellRenderer 除非你想:)

https://www.ag-grid.com/javascript-grid-context/

detailCellRendererParams: (masterGridParams) => ({
    detailGridOptions: {
        ...
        context: { 
            masterGrid: {
                node: masterGridParams.node.parent, 
                data: masterGridParams.data 
            } 
        },
        onCellClicked: detailGridParams => {
            console.log(detailGridParams.context.masterGrid.node);
            console.log(detailGridParams.context.masterGrid.data);
        }
    }
})

Answer 4

在不创建自定义细节渲染器的情况下，我费了很大劲才找到这个问题的解决方案，但我找不到任何可行的解决方案。所以真正好的解决方案已经回答了。我只是想分享另一种避免创建自定义渲染器的方法。

所以我所做的是即时更改详细信息数据并添加我需要的字段。

getDetailRowData: function (params: any) {
      params?.data?.children?.forEach((child:any) => {
        //You can assign any other parameter.
        child.parentId= params?.data?.id;
      });
      params.successCallback(params?.data?.children);
}

当您展开行以呈现详细信息时，方法 getDetailRowData 被调用，因此它将参数作为我们正在展开详细信息的当前行，详细信息 table 由调用 params.successCallback。所以在设置行数据之前，我正在迭代和更新 parentId。

ag-grid - 如何通过上下文菜单从子网格获取父节点？

ag-grid - how to get parent node from child grid via context menu?