在 ag-grid 中添加/删除行答案

【问题标题】：Add / Remove row(s) in ag-grid在 ag-grid 中添加/删除行
【发布时间】：2016-11-25 03:20:18
【问题描述】：

如何在 ag-grid 中添加或删除一行，
我试试这个，但是不行

$scope.gridOptions.rowData.push(data);

还有这个

scope.gridOptions.api.forEachNode( function(node) {
    var data = node.data;
    updatedNodes.push(vehicle);
});

$scope.gridOptions.api.refreshRows(updatedNodes);

谢谢

【问题讨论】：

我认为每次需要添加或删除行时都需要调用 api.setRowData(rowData)。

标签： angularjs ag-grid

【解决方案1】：

这就是 ag-grid 社区版本 22.1.1 对我有用的方法：

添加新行

const row = //someNewRowDataHere

this.gridOptions.rowData.push(row)
this.gridApi.setRowData(this.gridOptions.rowData)

删除

const selectedRow = this.gridApi.getFocusedCell()
const id = this.gridOptions.rowData[selectedRow.rowIndex].i

this.gridOptions.rowData.splice(selectedRow.rowIndex, 1)
this.gridApi.setRowData(this.gridOptions.rowData)

【讨论】：

需要删除行，这很好用，很高兴我不需要从服务器中提取数据进行简单的删除。
@eddy 我的想法是回答如何删除或添加，而不必再次从服务器中提取所有行。如果您的问题是关于对服务器的添加和删除调用，这样的事情应该可以工作（使用 axios）： axios.post('some route', row) axios.delete('some route', id)
不，我的意图也只是在典型的 CRUD 操作之后更新某一行。例如在插入或删除之后。我不想再拉所有的记录。我唯一担心的是，如果我没记错的话，rowData 仅用于客户端模型，而我是服务器端行模型
@eddy 是的，我的答案是客户端，我还没有尝试过服务器端。如果这也适用于服务器端，请稍后再写？否则自己回答我想看看。

【解决方案2】：

当前版本的 ag-grid 现在支持这个：

https://www.ag-grid.com/javascript-grid-insert-remove/

网格具有更改检测功能，但如果您想要/需要强制刷新，您可以选择其中一种刷新方法：

https://www.ag-grid.com/javascript-grid-refresh/

【讨论】：

是支持的..但这不是基于angularjs1
这一切都很好，但我仍然不明白我如何使网格刷新并显示来自 Angular 代码中的对象的更新数据（因此，添加新行，而不是编辑现有行）。例如，我有一个名为“gridData”的对象，它保存了网格的初始记录集。它在加载时很好地显示在网格中。现在，我在这个对象（在我的 Angular 脚本文件 .ts 中）的数组中添加一个项目，我需要屏幕上的表格来显示...
你可以选择一个刷新api函数：ag-grid.com/javascript-grid-refresh
@AlexanderZbinden 您的链接提供了有关refresh 的信息，但@TheCuBeMan 询问了insert。这是关于insert (updateRowData + add) 的正确信息：ag-grid.com/javascript-grid-data-update 和完全工作的部分this.gridApi.updateRowData({add:[your data here], addIndex:0});

【解决方案3】：

由于这个答案有点陈旧，只是注意到网格的另一个更新强调了对所有网格 CRUD 操作使用网格所谓的“事务”：

https://www.ag-grid.com/javascript-grid-data-update/#gsc.tab=0

【讨论】：

【解决方案4】：

我个人喜欢这种方法

添加行

$( '#newRow' ).on( 'click', function() {
    gridOptions.api.applyTransaction({ add: gridOptions.rowData });
} );

删除行（例如点击 bin 图标）

在启用rowDragManaged 的情况下工作

// remove row
$( document ).on( 'click', '#myGridFees .fa-trash-alt', function(e) {
    $.fn.agGridRemoveRowByBinClick(gridFeeOptions, $(this));
});


/**
 *
 * @param agGridOption
 * @param $this
 */
$.fn.agGridRemoveRowByBinClick = function(agGridOption, $this) {
    let id = $this.closest('.ag-row').attr( 'row-id' );
    agGridOption.api.applyTransaction({ remove: [ agGridOption.api.getRowNode(id).data ] });
}

【讨论】：