如何在行删除后升级/刷新 ag-grid？

Posted 2023-03-28

【中文标题】如何在行删除后升级/刷新 ag-grid？

【英文标题】：How to upgrade/refresh the ag-grid after row delete?

【发布时间】：2016-05-20 13:26:13

【问题描述】：

我有一个 ag 网格，我试图在其中删除一行...我可以使用“拼接”技术从数据源中删除该行，之后我想刷新表格。但它显示错误。这是我用来删除一行的代码

selectedvalue= //this holds the selected row value
rowData=[]; //this holds all the row data
onRowSelected(event) 
  this.selectedvalue = event;
 
deletebtn() 
    for (let i = 0; i < this.rowData.length; i++) 
        if (this.selectedvalue.node.data.make === this.rowData[i].make) 
            this.rowData.splice(i, 1);
            this.gridOptions.api.refreshView();
        
    

它显示类似这样的错误-->无法读取未定义的属性'refreshView'...如何查看行删除后表中所做的更改。

【参考方案1】：

编辑：此解决方案适用于版本 3.3.x（更新的 plnkr 链接）

您应该再次将行设置到网格中： 拼接后：

gridOptions.api.setRowData(gridOptions.rowData)

也许这个 plunkr 可以帮助https://plnkr.co/plunk/0k4sYa

ag-grid 的作者在 ag-grid 论坛中解释了这一点 该论坛已不存在

【讨论】：

呃，你能提供一个指向 ag-grid 论坛的链接吗？我已经注册但我不是企业用户，所以也许这就是我无法正确搜索该解释的原因。

我也不是企业用户。但是，您仍然可以在没有人的情况下搜索论坛。喜欢这个ag-grid.com/forum/…

谢谢！我无法在论坛中找到它，但事实证明答案并不完全是最新的。请参阅下面@user3294566 的答案。但是，对于 2016 年早期版本的 agGrid，您的答案是正确的；较新的版本只是具有更好的 API 调用，可以轻松完成行的删除和后续刷新。

Plunker是404 :-(gridOptions.api.setRowData(gridOptions.rowData)够用吗，还是以后有必要gridOptions.api.refreshClientSideRowModel()？

嗨@MawgsaysreinstateMonica。我已经更新了 plnkr 链接，plnkr 更改了链接方法。请参阅 setRowData 的脚本，至于那个 ag-grid 版本，它是唯一需要的。请注意 Gwyneth 提到的 ag-grid 版本。

【参考方案2】：

文档中描述了一种更有效的方法：Transaction Update API。

删除行后必须使用api.applyTransaction方法：

gridOptions.api.applyTransaction( remove: [array of rows you have deleted]);

例如只删除了一行：

gridOptions.api.applyTransaction( remove: [this.rowData[i]])

使用此方法，网格将仅更新参数中的行并保留所有其他视图状态（顺序，...）。

为了完成答案，还有参数可以在添加或修改一行或多行时更新网格。

添加时：

gridOptions.api.applyTransaction( add: [array of rows you have added]);

修改时：

gridOptions.api.applyTransaction( update: [array of rows you have changed]);

备注：对于旧版本的 AG Grid，方法是 api.updateRowData 而不是 api.applyTransaction

【讨论】：

属性 gridOptions 不存在

updateRowData() 替换为applyTransaction()

【参考方案3】：

为了获得更好的性能，请使用网格 api 调用来添加/删除行。 在开头插入一行，即所选行的副本：

var rowData = JSON.parse(JSON.stringify(selectedNode.data));
gridOptions.api.insertItemsAtIndex(0, [rowData]);

要删除选定的行：

var selectedNodes = gridOptions.api.getSelectedNodes();
gridOptions.api.removeItems(selectedNodes);

请仅在原始行的深层副本之后插入新行。 否则，api 会继续引用同一行。 因此，随后删除新行，将从网格中删除原始行。

api详情请参考文档。https://www.ag-grid.com/javascript-grid-insert-remove/

【讨论】：

你没有在插入的任何地方使用newRow...相反，你有rowData。我想你需要改变它。

感谢您的回答！虽然现在对我来说很明显，但 agGrid 的工作方式在 2017 年中期发生了变化——最初的问题是在 2016 年提出的——我实际上有一个 过时 版本的 agGrid，你自己的答案（这对于当前版本的 agGrid 是正确的！）不起作用，即 JS 控制台因缺少 API 函数而出现一些错误。确实，您的回答（我已赞成 :-)）是完成 OP 所要求的更正确、最新的方法 - no 需要提供 all i> 再次将行移至 agGrid，就像 2016 年初的情况一样。

【参考方案4】：

$events.refreshInfiniteCache();

您可以简单地使用它来更新您的网格

【参考方案5】：

更新 aggrid 特定单元格中的数据

        let rowNode = f.gridApi.getRowNode(f.id);  // use to find the rowNode
        rowNode.setDataValue('myPrice','1000') // update the datavalue in the price cell

f 是 aggrid 的当前节点

【参考方案6】：

为较新版本的 agGrid 更新了答案。

从版本23.1.0+：使用applyTransaction(transaction)

gridApi.applyTransaction( remove: rowArray );

// similarly you can add or update using transaction
gridApi.applyTransaction( update: rowArray);
gridApi.applyTransaction( add: rowArray);

其中rowArray 是一个行数据数组。可以从RowNode.data 访问现有的行数据。

示例

onRemoveFirst() 
  const firstRow = this.gridApi.getRenderedNodes()[0].data;

  if (!firstRow) return;
  this.gridApi.applyTransaction( remove: [firstRow] );


onRemoveSelected() 
  const selectedData = this.gridApi.getSelectedRows();
  this.gridApi.applyTransaction( remove: selectedData );


onThanos() 
  const itemsToRemove = [];

  this.gridApi.forEachNodeAfterFilterAndSort((rowNode) => 
    const shouldThanos = randomBetween(1, 100) <= 50;

    if (shouldThanos) 
      itemsToRemove.push(rowNode.data);
    
  );
  this.gridApi.applyTransaction( remove: itemsToRemove );

现场演示

【讨论】：

applyTransaction 没有更新底层数据数组。如何获取完整的数据集（包括修改）对此有何想法？