React.js：如何从 ag 网格中删除行？

Posted 2023-03-28

【中文标题】React.js：如何从 ag 网格中删除行？

【英文标题】：React.js: How to delete row from an ag grid?

【发布时间】：2020-07-01 15:49:15

【问题描述】：

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

这里是代码

onButtonClick = e => 
  this.setState(
    visible: true
  );
  const selectedNodes = this.gridApi.getSelectedNodes();
  let deletedRow = selectedNodes;
  e.gridApi.updateRowData( remove: [deletedRow] );
;

当我使用这个而不是 e 时，我得到：ag-Grid: 由于找不到对象而找不到数据项

<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)

无法显示错误。打开浏览器控制台查看

g-Grid：找不到数据项，因为找不到对象

错误：对象太大而无法检查。打开浏览器控制台进行查看。 在对象。 （预览-2e4d276ba818b5932108b.js:1） 在 JSON.stringify() 在 P.r.错误 (preview-2e4d276ba818b5932108b.js:1) 在 P (preview-2e4d276ba818b5932108b.js:1) 在 preview-2e4d276ba818b5932108b.js:1 在 Array.map() 在 Q (preview-2e4d276ba818b5932108b.js:1) 在控制台。 [作为日志] (preview-2e4d276ba818b5932108b.js:1) 在 App._this.onButtonClick (index.js:44) 在 htmlUnknownElement.callCallback (react-dom.development.js:336)

[RowNode] 0：RowNode childrenMapped： 可选：true objectId: 1 alreadyRendered: true 突出显示: null selected: true mainEventService: EventService allSyncListeners: Map(75), allAsyncListeners: Map(56), globalSyncListeners: Set(0), globalAsyncListeners: Set(1), asyncFunctionsQueue: Array(0), … gridOptionsWrapper：GridOptionsWrapper propertyEventService： 事件服务，domDataKey：“__AG_0.09475464623441865”，layoutElements： Array(5), gridOptions: …, columnController: ColumnController, … 选择控制器：选择控制器 事件服务：事件服务， rowModel：ClientSideRowModel，gridOptionsWrapper：GridOptionsWrapper， columnApi: ColumnApi, gridApi: GridApi, … columnController: ColumnController primaryHeaderRowCount：1，secondaryHeaderRowCount： 0，secondaryColumnsPresent：假，gridHeaderRowCount：1， 显示的LeftColumns：数组（0），... valueService：ValueService 初始化：真，gridOptionsWrapper：GridOptionsWrapper， 表达式服务：表达式服务，列控制器： ColumnController, eventService: EventService, … rowModel: ClientSideRowModel gridOptionsWrapper：GridOptionsWrapper， 列控制器：列控制器，过滤器管理器：过滤器管理器， $范围：未定义，选择控制器：选择控制器，... 上下文：上下文 beanWrappers：…，componentsMappedByName：…， 销毁：假，contextParams：…，记录器：记录器 valueCache： ValueCache cacheVersion: 2, gridOptionsWrapper: GridOptionsWrapper, 活动：假，永不过期：假 columnApi：ColumnApi columnController: ColumnController gridApi: GridApi detailGridInfoMap: …, immutableService: ImmutableService, csvCreator: CsvCreator, excelCreator: null, rowRenderer: RowRenderer, …组：假主人：假扩展：假canFlower：假父： RowNode childrenMapped：null，可选择：true，__objectId：0， alreadyRendered：false，突出显示：null，... 级别：0 数据：日期： "2020-03-13" Price1: 31.72 Price2: 33 Price3: 0.929 Price4: 0.907 价格 5：1.097 价格 6：1.147 价格 7：1.175 价格 8：1.122 价格 9：1.272 价格 10：0.977 价格 11：0.293 __proto：对象 id：“0” childrenAfterFilter：未定义 allChildrenCount：null firstChild：true lastChild：false childIndex：0 uiLevel：0 oldRowTop：未定义 rowTop：0 rowHeight：28 rowHeightEstimated: false rowIndex: 0 eventService: EventService allSyncListeners: Map(16), allAsyncListeners: Map(8), globalSyncListeners: Set(0), globalAsyncListeners: Set(0), asyncFunctionsQueue：数组（0），... proto：对象长度：1 原型：数组（0）

【问题讨论】：

这能回答你的问题吗？ ag-Grid row not deleting

【参考方案1】：

我通过替换来解决问题

const selectedNodes = this.gridApi.getSelectedNodes();

与

var selectedNodes = this.gridApi.getSelectedRows();

【参考方案2】：

您不必拨打e，而是可以直接拨打电话

this.gridApi.updateRowData( remove: [deletedRow] ) 

【讨论】：

我得到：ag-Grid：找不到数据项，因为找不到对象

@AlaaAlarfaj 请准备 plinkr 或 stackblitz 示例

【参考方案3】：

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

通过

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

【讨论】：

仍然得到：ag-Grid：找不到数据项，因为找不到对象