尝试向 ag-grid 添加新行 - 但行未添加

Question

我正在尝试向 ag-grid 添加一个新行，但它没有添加。 我使用 gridAPI.updateRowData 方法在 ag-grid 中创建新行。 我创建了一个 function 用于在 ag-grid 中创建新行。 我在按钮点击事件中调用了这个 function。 但是当我单击新按钮时，行没有添加。 请提出解决方案。

下面是源代码。

import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-

layouts';
import React, {useState} from 'react';
import {AgGridColumn, AgGridReact} from 'ag-grid-react';
import ReactDOM from "react-dom";
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';
import { GridApi, RefSelector } from 'ag-grid-community';
import axios from 'axios';
    
class FirstTab extends React.Component{
    constructor(props){
        super(props);
        this.state = {
          columnDefs: [
              {headerName: "TaskId", field: "TaskId"},
              {headerName: "TaskName", field: "TaskName"},
              {headerName: "Duration", field: "Duration"},
              {headerName: "Hours", field: "Hours"},
              {headerName: "Weightage", field: "Weightage"},
              {headerName: "Description", field: "Description"}
          ],
          rowData: [
            
             
          ]
      }
        this.Rightpane = this.Rightpane.bind(this);
        this.Leftpane = this.Leftpane.bind(this);
        this.onAddRows = this.onAddRows.bind(this);
       
    }
    onGridReady(params){
      this.gridApi = params.api;
      fetch("http://localhost:64155/api/Project").then(res => {
            console.log(res);
            return res.json();
      }).then(rowData => {
            //this.setState({ rowData }); no more this but...
            this.gridApi.setRowData(rowData);
      })
    }

    onAddRows() {
     
      this.gridApi.updateRowData({
        add: [{TaskId: "", TaskName: "", Duration: 0, Hours: 0,Weightage: 0,Description: ""}]
           });
           
          }
            
    Rightpane(){
          
   return (
   
         <div className="ag-theme-alpine" style={{height:1000 , width: 1500}}>
           
           <button className="btn btn-primary mb-3" 
            onClick={this.onAddRow}>New</button>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <button className="btn btn-primary mb-3">Delete</button> &nbsp;&nbsp;&nbsp;&nbsp;
            <button className="btn btn-primary mb-3">Move up</button> &nbsp;&nbsp;&nbsp;&nbsp;
            <button className="btn btn-primary mb-3">Move down</button> &nbsp;&nbsp;&nbsp;&nbsp;
            <AgGridReact defaultColDef={{sortable: true, filter: true,editable: true }}
                pagination={true}
                onGridReady={this.onGridReady}
                columnDefs={this.state.columnDefs}
                  rowData={this.state.rowData}>
                          
            </AgGridReact>
       </div>
   )
   
}
render() {
    return (<div className="App">
<SplitterComponent id="horizontal" height="250px" width='1900px'>
<PanesDirective>
//<PaneDirective size='200px' content={this.Leftpane}/>
<PaneDirective size='200px' content={this.Rightpane}/>
</PanesDirective>
</SplitterComponent>
</div>);
}
}
 
export default FirstTab;

Answer 1

使用网格的预定义 columnDef 添加新的空白行。

gridApi.applyTransaction({ add: [{}] });

一个在 React/TS 中从按钮点击调用它的例子

function addNewRow(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
    if (gridApi) {
      gridApi.applyTransaction({ add: [{}] });
    }
  }

参考： https://ag-grid.com/react-data-grid/data-update-transactions/