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

Question

我有一个 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”...如何查看行删除后表中所做的更改。

Answer 1

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

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

gridOptions.api.setRowData(gridOptions.rowData)

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

ag-grid 的作者在 ag-grid 论坛中对此进行了说明论坛已不存在

Answer 2

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

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

whererowArray是行数据数组。可以从 访问现有行数据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 });
}

现场演示