在ag-grid中添加/删除行

时间:2016-07-21 13:36:25

标签: angularjs ag-grid

如何在ag-grid中添加或删除行,
我试试这个,但没有工作

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

并使用此

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

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

感谢的

4 个答案:

答案 0 :(得分:5)

这是使用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)

答案 1 :(得分:2)

由于这个答案有点陈旧,只是注意到网格的另一个更新强调了网格调用"事务"对于所有网格CRUD操作:

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

答案 2 :(得分:1)

当前版本的ag-grid现支持:

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

网格确实具有更改检测功能,但如果您需要/需要刷新,则可以选择其中一种刷新方法:

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

答案 3 :(得分:1)

我个人喜欢这种方法

添加行

$( '#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 ] });
}