向网格中添加新行答案

【问题标题】：Adding new rows to the grid向网格中添加新行
【发布时间】：2016-05-04 01:37:59
【问题描述】：

我像这样初始化 ag-grid：

<ag-grid-ng2 [rowData]="records"></ag-grid-ng2>

向记录数组添加新项目后，ag-grid 中的行保持不更新。我必须调用 setRowData(records)。但这非常慢，并且 ag-grid 失去了它的状态（如聚焦单元格）。

在更改 rowData 中的数据期间是否有另一种方法可以刷新 ag-grid 中的行。

【问题讨论】：

标签： ag-grid

【解决方案1】：

不，没有其他办法。网格期望 rowData 是不可变的，这意味着您必须替换数组才能获取 [rowData] 属性。解决这个问题的方法是调用 api.setRowData() 方法，该方法强制网格将 rowData 视为一组新数据。

【讨论】：

【解决方案2】：

最近我注意到一个新功能this.gridOptions.api.updateRowData(Tranactions)。你传递一个包含三个数组的对象：

var transactions = {
    add: [/*array of records you want to add.*/]
    remove: [/*array of records you want to remove.*/]
    update: [/*array of records you want to update.*/]
}

this.gridOptions.api.updateRowData(tranactions);

参考：https://www.ag-grid.com/javascript-grid-data-update/?framework=javascript。（出于某种原因，他们在该页面上调用函数 updateData 但不存在这样的函数。而是称为updateRowData。）

【讨论】：

【解决方案3】：

找到了解决办法。可能是我失去了一些功能并且会有一些错误，但对我来说它现在可以工作了。

AddRecord(data) {
    this.records.push(data);
    var id = this.records.length-1;
    var node = {childIndex:id, data: this.records[id], firstChild: false, id:id, lastChild: false};
    this.gridOptions.api.grid.inMemoryRowController.rowsAfterMap.push(node);
    this.gridOptions.api.rowRenderer.refreshView(id);
    this.gridOptions.api.hideOverlay();
}

【讨论】：

【解决方案4】：

这就是我最终添加新记录的方式。您可以为此使用applyTransaction() 函数（我认为此用途称为updateRowData()）。

var newItems = [createNewRowData(), createNewRowData(), createNewRowData()];
var res = this.gridApi.applyTransaction({
  add: newItems,
  addIndex: addIndex,
});

以上代码来自their example。

【讨论】：