我尝试向ag-grid添加新行,但没有添加。我使用gridAPI.updateRowData方法在ag-grid中创建新行。我创建了一个函数用于在ag-grid中创建新行。我在按钮单击事件上调用了此函数。但在单击新按钮时没有添加行。请提供解决方案。
以下是源代码。
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>
<button className="btn btn-primary mb-3">Delete</button>
<button className="btn btn-primary mb-3">Move up</button>
<button className="btn btn-primary mb-3">Move down</button>
<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;
1条答案
按热度按时间aemubtdh1#
使用网格的预定义columnDefs添加新的空白行。
在React/TS中通过单击按钮调用此方法的示例
参考:https://ag-grid.com/react-data-grid/data-update-transactions/