在 ag-grid 中添加/删除行

Question

如何在 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);

谢谢

Answer 1

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

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

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

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

Answer 2

由于这个答案有点陈旧，只是注意到对网格的另一次更新强调了对所有网格 CRUD 操作使用网格调用 "transactions" 的内容：

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

Answer 3

这就是 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)

Answer 4

我个人喜欢这种方式

添加行

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

删除行（例如单击 bin-icon）

在启用 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 ] });
}

在 ag-grid 中添加/删除行

Add / Remove row(s) in ag-grid

angularjs

ag-grid