Ag grid 用于添加行而不是创建新行节点的applyTransaction ag Grid

我试图在ag网格中的treeData中单击“添加新行”按钮创建一个新的父行 并在单元格中保留编辑的值

最初，rowData初始化为：-

rowData.ts 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”}
];
var-gridApi:any；
类型AgGridApi={
grid？：GridApi；
column？：ColumnApi；
};
常量网格=（）=>{
const apiRef=React.useRef({
网格：未定义，
列：未定义
});
const onGridReady=（参数：GridReadyEvent）=>{
apiRef.current.grid=params.api；
apiRef.current.column=params.columnApi；
gridApi=params.api；
};
const createNewRowData=（）=>{
设newData={
orgHierarchy:[“”]，
职位名称：“，
就业类型：“
};
console.log（newData）；
applyTransaction（{add:[newData]}）；
};
返回(
添加新行
{
const{level}=params.node；
返回（params.getValue（“orgHierarchy”）| |[]）.slice(
水平，
级别+1
);
},
valueSetter:（参数）=>{
const oldValue=params.oldValue[0]；
const{newValue}=params；
if（oldValue==newValue | |！params.api）返回false；
params.api.forEachNode（（节点）=>{
const{data}=节点；
数据[“orgHierarchy”]=数据[“orgHierarchy”]。映射（（h）=>
h==旧值？新值：h
);
});
返回true；
},
CellRenderParams:{suppressCount:false}
}}
getDataPath={（数据）=>data.orgHierarchy}
onGridReady={onGridReady}
rowData={rowData}
框架组件={{
InsertNodeBtnRender
}}
/>
);
};
导出默认网格；

{
  orgHierarchy: [""],
  jobTitle: ""
}

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" }
];

var gridApi: any;

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

const Grid = () => {
  const apiRef = React.useRef<AgGridApi>({
    grid: undefined,
    column: undefined
  });

  const onGridReady = (params: GridReadyEvent) => {
    apiRef.current.grid = params.api;
    apiRef.current.column = params.columnApi;
    gridApi = params.api;
  };
  const createNewRowData = () => {
    let newData = {
      orgHierarchy: [""],
      jobTitle: "",
      employmentType: ""
    };
    console.log(newData);
    gridApi.applyTransaction({ add: [newData] });
  };
  return (
    <div style={{ height: "80vh" }}>
      <button type="button" onClick={createNewRowData}>
        Add new row
      </button>
      <div
        style={{ height: "100%", width: "100%" }}
        className="ag-theme-balham"
      >
        <AgGridReact
          rowSelection="multiple"
          suppressRowClickSelection
          columnDefs={columnDefs}
          defaultColDef={{
            resizable: true,
            editable: true
          }}
          groupDefaultExpanded={-1}
          treeData
          autoGroupColumnDef={{
            headerName: "Organisation Hierarchy",
            minWidth: 400,
            valueGetter: (params) => {
              const { level } = params.node;
              return (params.getValue("orgHierarchy") || []).slice(
                level,
                level + 1
              );
            },
            valueSetter: (params) => {
              const oldValue = params.oldValue[0];
              const { newValue } = params;
              if (oldValue === newValue || !params.api) return false;
              params.api.forEachNode((node) => {
                const { data } = node;
                data["orgHierarchy"] = data["orgHierarchy"].map((h) =>
                  h === oldValue ? newValue : h
                );
              });
              return true;
            },
            cellRendererParams: { suppressCount: false }
          }}
          getDataPath={(data) => data.orgHierarchy}
          onGridReady={onGridReady}
          rowData={rowData}
          frameworkComponents={{
            InsertNodeBtnRender
          }}
        />
      </div>
    </div>
  );
};

export default Grid;