在 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 社区版本 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 2

我个人喜欢这种方法

添加行

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

删除行（例如单击垃圾箱图标）

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

Answer 3

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

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

网格进行功能更改检测，但如果您想要/需要强制刷新，您可以选择以下刷新方法之一：

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

Answer 4

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

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