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(); |
替换
by
1 | this.gridApi.updateRowData({ remove: [deletedRow.data] }) |
您不必致电
1 | this.gridApi.updateRowData({ remove: [deletedRow] }) |