关于reactjs:React.js:如何从Ag网格删除行?

React.js: How to delete row from an ag grid?

我正在使用react和ag网格。我想从网格中删除行。

这是代码

1
2
3
4
5
6
7
8
onButtonClick = e => {
  this.setState({
    visible: true
  });
  const selectedNodes = this.gridApi.getSelectedNodes();
  let deletedRow = selectedNodes;
  e.gridApi.updateRowData({ remove: [deletedRow] });
};

当我用它代替e时,我得到了:ag-Grid:由于找不到对象而找不到数据项

1
2
3
4
5
6
7
8
9
10
<button onClick={this.onButtonClick}>delete</button>;
<AgGridReact
  onGridReady={params => (this.gridApi = params.api)}
  rowSelection="multiple"
  columnDefs={this.state.columnDefs}
  rowData={this.state.rowData}
  defaultColDef={{
    editable: true
  }}
/>;

console.log(deletedRow)

Unable to display error. Open your browser's console to view

g-Grid: could not find data item as object was not found

Error: Object too large to inspect. Open your browser console to view.
at Object. (preview-2e4d276ba818b5932108b.js:1)
at JSON.stringify ()
at P.r.error (preview-2e4d276ba818b5932108b.js:1)
at P (preview-2e4d276ba818b5932108b.js:1)
at preview-2e4d276ba818b5932108b.js:1
at Array.map ()
at Q (preview-2e4d276ba818b5932108b.js:1)
at console. [as log] (preview-2e4d276ba818b5932108b.js:1)
at App._this.onButtonClick (index.js:44)
at HTMLUnknownElement.callCallback (react-dom.development.js:336)

[RowNode] 0: RowNode childrenMapped: {} selectable: true
objectId: 1 alreadyRendered: true highlighted: null selected: true mainEventService: EventService {allSyncListeners: Map(75),
allAsyncListeners: Map(56), globalSyncListeners: Set(0),
globalAsyncListeners: Set(1), asyncFunctionsQueue: Array(0), a€|}
gridOptionsWrapper: GridOptionsWrapper {propertyEventService:
EventService, domDataKey:"__AG_0.09475464623441865", layoutElements:
Array(5), gridOptions: {a€|}, columnController: ColumnController, a€|}
selectionController: SelectionController {eventService: EventService,
rowModel: ClientSideRowModel, gridOptionsWrapper: GridOptionsWrapper,
columnApi: ColumnApi, gridApi: GridApi, a€|} columnController:
ColumnController {primaryHeaderRowCount: 1, secondaryHeaderRowCount:
0, secondaryColumnsPresent: false, gridHeaderRowCount: 1,
displayedLeftColumns: Array(0), a€|} valueService: ValueService
{initialised: true, gridOptionsWrapper: GridOptionsWrapper,
expressionService: ExpressionService, columnController:
ColumnController, eventService: EventService, a€|} rowModel:
ClientSideRowModel {gridOptionsWrapper: GridOptionsWrapper,
columnController: ColumnController, filterManager: FilterManager,
$scope: undefined, selectionController: SelectionController, a€|}
context: Context {beanWrappers: {a€|}, componentsMappedByName: {a€|},
destroyed: false, contextParams: {a€|}, logger: Logger} valueCache:
ValueCache {cacheVersion: 2, gridOptionsWrapper: GridOptionsWrapper,
active: false, neverExpires: false} columnApi: ColumnApi
{columnController: ColumnController} gridApi: GridApi
{detailGridInfoMap: {a€|}, immutableService: ImmutableService,
csvCreator: CsvCreator, excelCreator: null, rowRenderer: RowRenderer,
a€|} group: false master: false expanded: false canFlower: false parent:
RowNode {childrenMapped: null, selectable: true, __objectId: 0,
alreadyRendered: false, highlighted: null, a€|} level: 0 data: Date:
"2020-03-13" Price1: 31.72 Price2: 33 Price3: 0.929 Price4: 0.907
Price5: 1.097 Price6: 1.147 Price7: 1.175 Price8: 1.122 Price9: 1.272
Price10: 0.977 Price11: 0.293
__proto: Object id:"0" childrenAfterFilter: undefined allChildrenCount: null firstChild: true lastChild: false childIndex: 0
uiLevel: 0 oldRowTop: undefined rowTop: 0 rowHeight: 28
rowHeightEstimated: false rowIndex: 0 eventService: EventService
{allSyncListeners: Map(16), allAsyncListeners: Map(8),
globalSyncListeners: Set(0), globalAsyncListeners: Set(0),
asyncFunctionsQueue: Array(0), a€|}
proto: Object length: 1
proto: Array(0)


我用replace

解决了问题

1
const selectedNodes = this.gridApi.getSelectedNodes();

1
var selectedNodes = this.gridApi.getSelectedRows();

替换this.gridApi.updateRowData({ remove: [deletedRow] })

by

1
this.gridApi.updateRowData({ remove: [deletedRow.data] })


您不必致电e,而不必直接致电

1
this.gridApi.updateRowData({ remove: [deletedRow] })