ag-grid增加行删除行修改行

ag-gridd的增加、删除、修改行主要通过api.updateRowData和rowNode.setData进行。

ag-grid更新行数据

ag-grid更新数据有两种方法，api.updateRowData和rowNode.setData

//第一种方法,通过setData更新,首先获取需要更新的节点
var rowNode = gridOptions.api.getRowNode(2);//获取表格第3行数据
//更新数据
var newRow= {
        id: '66',
        name: 'it小书童',
        url: 'itxst.com',
        catalog: Math.floor(Math.random()*100000)
  };
rowNode.setData(newRow);

//第二种方法，通过updateRowData更新 
 var selRows = gridOptions.api.getSelectedRows(); //获取选中的行
 selRows[0].name='11111'; //更新选中数据的第一行
 gridOptions.api.updateRowData({update: selRows});

在线试一试

ag-grid删除数据

//第一种方法,通过api.setRowData删除
 gridOptions.rowData.splice(0, 1);//删除第一行数据
 gridOptions.api.setRowData(gridOptions.rowData);
 
 //第二种方法删除选中行
 var selRows = gridOptions.api.getSelectedRows(); //获取选中的行
 gridOptions.api.updateRowData({remove: selRows});

在线试一试

ag-grid新增行

//第一种方法,通过api.setRowData新增行
  var newRow= {
        id: '12',
        name: 'it小书童',
        url: 'itxst.com',
        catalog: Math.floor(Math.random()*100000)
  };
 gridOptions.rowData.push(newRow)
 gridOptions.api.setRowData(gridOptions.rowData);
 
//第二种方法新增行
 var newRows= [{
        id: '15',
        name: 'it小书童',
        url: 'itxst.com',
        catalog: Math.floor(Math.random()*100000)
  }];  
 gridOptions.api.updateRowData({add: newRows});
 //第三种方法新增到第二行
 var newRows= [{
        id: '15',
        name: 'it小书童',
        url: 'itxst.com',
        catalog: Math.floor(Math.random()*100000)
  }];  
 gridOptions.api.updateRowData({add: newRows,addIndex:1});

在线试一试