如何在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);
感谢的
答案 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/
网格确实具有更改检测功能,但如果您需要/需要刷新,则可以选择其中一种刷新方法:
答案 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 ] });
}