行删除后如何upgrade/refresh ag-grid？

Question

我有一个 ag 网格，我正在尝试删除一行...我可以使用 "splice" 技术从数据源中删除该行，之后我想刷新 table.But 它显示 error.This 是我用来删除行的代码

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'...如何查看行删除后 table 中所做的更改。

Answer 1

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

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

gridOptions.api.setRowData(gridOptions.rowData)

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

~~ag-grid 的作者在ag-grid 论坛中对此进行了解释~~ 该论坛已不存在

Answer 2

为了获得更好的性能，使用网格 api 调用 add/remove 行。
要在开头插入一行，即所选行的副本：

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/

Answer 3

文档中描述了一种更有效的方法：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

Answer 4

$events.refreshInfiniteCache();

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

Answer 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的当前节点

Answer 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 });
}

现场演示

Answer 7

下面是我如何从我的 AgGrid 中删除行。

Select 1 行或多行使用 ridApi.getSelectedNodes.
映射选中的行，取出给定行的索引。
使用数组法过滤掉所有未选中的行

将过滤后的行与旧行展开

const selectedRows: RowNode[] = this.gridApi.getSelectedNodes();
const rowsToRemove = selectedRows.map(node => node.rowIndex);
const filteredRows = allRows.filter((_, i) => !rowsToRemove.includes(i));

this.rowData = [...filteredRows]

希望本文对有需要的人有所帮助！

行删除后如何upgrade/refresh ag-grid？

How to upgrade/refresh the ag-grid after row delete?

ag-grid

angular

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

例子

现场演示

行删除后如何upgrade/refresh ag-grid？

How to upgrade/refresh the ag-grid after row delete?

ag-grid

angular

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

例子

现场演示

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