Ag grid 如何在ag网格中选定节点后在树状图中创建新行

我正在尝试在树状视图中创建新行并删除所选行

从所选父节点创建一个子行作为树，即在每行下方添加（树状视图）

创建一个全新的父行

链接：-

grid.tsx

从“React”导入React；
从“ag grid react”导入{AgGridReact}；
导入“ag-grid-community/dist/styles/ag-grid.css”；
导入“ag-grid-community/dist/styles/ag-theme-balham.css”；
从“ag网格社区”导入{GridReadyEvent，GridApi，ColumnApi，ColDef}；
从“/insertnodebtrender”导入insertnodebtrender；
从“/rowData”导入行数据；
常数columnDefs:ColDef[]=[
{
位置：正确，
cellRenderer:“InsertNodeBtnRender”，
最大宽度：60
//可导航：正确，
},
{字段：“职务头衔”}，
{字段：“employmentType”}
];
类型AgGridApi={
grid？：GridApi；
column？：ColumnApi；
};
功能网格（）{
const apiRef=React.useRef({
网格：未定义，
列：未定义
});
const onGridReady=（参数：GridReadyEvent）=>{
apiRef.current.grid=params.api；
apiRef.current.column=params.columnApi；
};
返回(
data.orgHierarchy}
onGridReady={onGridReady}
rowData={rowData}
框架组件={{
InsertNodeBtnRender
}}
/>
);
}
导出默认网格；

import React from "react";
import { AgGridReact } from "ag-grid-react";
import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-balham.css";
import { GridReadyEvent, GridApi, ColumnApi, ColDef } from "ag-grid-community";
import InsertNodeBtnRender from "./InsertNodeBtnRender";
import rowData from "./rowData";

const columnDefs: ColDef[] = [
  {
    lockPosition: true,
    cellRenderer: "InsertNodeBtnRender",
    maxWidth: 60
    // suppressNavigable: true,
  },
  { field: "jobTitle" },
  { field: "employmentType" }
];

type AgGridApi = {
  grid?: GridApi;
  column?: ColumnApi;
};

function Grid() {
  const apiRef = React.useRef<AgGridApi>({
    grid: undefined,
    column: undefined
  });
  const onGridReady = (params: GridReadyEvent) => {
    apiRef.current.grid = params.api;
    apiRef.current.column = params.columnApi;
  };

  return (
    <div style={{ height: "80vh" }}>
      <div
        style={{ height: "100%", width: "100%" }}
        className="ag-theme-balham"
      >
        <AgGridReact
          rowSelection="multiple"
          suppressRowClickSelection
          columnDefs={columnDefs}
          defaultColDef={{
            resizable: true
          }}
          groupDefaultExpanded={-1}
          treeData
          autoGroupColumnDef={{
            headerName: "Organisation Hierarchy",
            minWidth: 400,
            cellRendererParams: { suppressCount: false }
          }}
          getDataPath={(data) => data.orgHierarchy}
          onGridReady={onGridReady}
          rowData={rowData}
          frameworkComponents={{
            InsertNodeBtnRender
          }}
        />
      </div>
    </div>
  );
}

export default Grid;