Question

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

定义为key-relation模型并在getDetailRowData方法上定义的主\明细父节点数据存在于params中

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

通过上下文菜单尝试过

右键单击-执行getContextMenuItems，输入为params

在此示例中，child-grid没有任何行，并且context-params中的node为null，可以， 但是无论如何，至少可以通过grid API检索父级详细信息，不是吗？

然后我尝试通过节点获取parent：但是您可以看到detail_173而不是ROOT_NODE_ID，这对我来说很困惑。

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

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

Answer 1

对于无法访问生命周期方法的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 2

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

右键单击任何子网格的单元格，然后检查控制台日志。您将能够在日志中看到您单击的子记录的父记录。

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

从params获取子网格的包装HTML节点-在代码中，我将其作为gridOptionsWrapper.layoutElements数组的第六个元素。
获取其第三级父元素-父元素的实际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 3

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

使用init方法：

this.masterNode = params.node.parent;

创建详细信息网格时：

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

这是一个小矮人，证明了这一点： https://next.plnkr.co/edit/8EIHpxQnlxsqe7EO

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

3 个答案: