行删除后如何升级/刷新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

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

gridOptions.api.setRowData(gridOptions.rowData)

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

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

Answer 2

为了获得更好的性能,请使用grid 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 3

文档中介绍了一种更有效的方法：ag-Grid更新数据。

api.updateRowData在删除行之后，必须使用该方法：

this.gridOptions.api.updateRowData({ remove: [array of rows you have deleted]});

例如，仅删除一行：

this.gridOptions.api.updateRowData({ remove: [this.rowData[i]]})

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