ag-grid angular更新表格数据的方法

数据更新有三种情况:

1.表格整个数据的更新:setRowData
2.更新一行数据:setData 、updateRowData、applyTransaction
3.更新单元格数据:setDataValue

1.表格整个数据的更新

 //调用接口重新设置数据
  this.gridApi.setRowData(newData);

2.更新一行数据

function bySetRows() {
   //通过setData更新,首先获取需要更新的节点
   var rowNode = this.gridApi.getRowNode(2);//获取表格第3行数据
   //更新的数据
   var newData = {
      id: 'bb',
      make: 'Ford',
      model: newModel,
      price: newPrice,
    };
    rowNode.setData(newData);
 }
function byRowNode() {
 	var selRow = this.gridApi.api.getSelectedRows(0); //获取选中的行    
 	selRow.name = '小明'; //更新选中数据的第一行            
 	this.gridApi.api.updateRowData({update: selRow});
}

let rowNodeTrans = this.gridOptions.api?.applyTransaction({ add: [data] });
this.gridOptions.api?.flashCells({ rowNodes: rowNodeTrans?.add })

// 还有remove 和 update 方法
 const index = this.rowData.findIndex(item => item.fxDataId === id);
 this.rowData[index] = { ...this.rowData[index],'name':'Jack'}
 this.gridOptions.api?.applyTransaction({
  update: [this.rowData[index]]
 });
 

3.更新单元格数据

 //获取具有给定 ID 的行节点
 var rowNode = this.gridApi.getRowNode('id');
 var newName = '小明';
 // 替换指定列的值
 rowNode.setDataValue('name', newName);

页面有多个表格时最好用applyTransaction

你可能感兴趣的:(javascript,前端,开发语言,typescript,angular.js)