单击“插入新行”按钮后，将触发以下方法，并将一个空的新行附加到当前最后一行。
insertNewRow(){
var newItem = this.createNewRowData();
var res = this.gridOptions.api.updateRowData({add: [newItem]});
}
createNewRowData(){
var newData = [];
//blah blah
return newData;
}
丰富屏幕上的数据后，如何让网格拾取新行（可能还有自上次数据库检索以来已更改的所有行）？
请注意，在单击“保存”按钮之前，我可以多次单击“插入新行”来创建多行。
saveChanges(){
var data = "HOW TO GET NEW ROWS AND UPDATED ROWS, AND STORE HERE??";
this.myAppService.saveData(data).subscribe(
//blah blah
);
console.log("Saved successfully to database");
}
编辑1
尝试将以前的记录存储到变量（“tableData”）中：
tableData: string[] = [];
currentData: string[] = [];
retrieveTableData (){
//blah blah
tableData loaded with an array of json
}
saveChanges(){
this.gridOptions.api.forEachNode((rowNode) => {
this.currentData.push(rowNode.data);
});
console.log(this.currentData);
this.currentData.forEach(item => {
console.log(item);
if (!this.tableData.includes(item)){
console.log("Updated Row: " + item);
}
});
}
我猜数据类型等存在一些问题。
控制台记录“tableData”和“currentData”的示例：
[object Object],[object Object],[object Object]
如果我打印出任一变量下的每个项目：
{FUND_CODE: "TEST1", PORT_CODE: "TEST1"}
另一种方法是在对象中保留标志以识别其新的/修改的，
interface Item {
//other properties
newOrModified?: string;
}
_______________
items:Item[];
insertNewRow(){
var newItem = this.createNewRowData();
newItem.newOrModified="New";
var res = this.gridOptions.api.updateRowData({add: [newItem]});
}
onCellValueChanged(item: Item ) {
item.newOrModified="Modified";
}
saveChanges(){
cost modifieditems = this.items.filter(item=> item.newOrModified === "Modified" );
cost newitems= this.items.filter(item=> item.newOrModified === "New" );
}
<ag-grid-angular style="width: 100%; height: 500px;"
class="ag-fresh"
[columnDefs]="columnDefs"
[rowData]="items"
(gridReady)="onGridReady($event)"
(cellValueChanged)="onCellValueChanged($event)">
</ag-grid-angular>
你可以这样做，
//store your old records in one variable
this.previousrecords = this.http.getAllRecords();
this.bindRecrods = [...this.previousrecords];//bind this to grid
//when saving records try like this
this.bindRecrods.forEach(rec=> {
if( !this.previousrecords.includes(rec) ){
//insert or update record
}
});
回答这个问题有点晚了，但最近我遇到了同样的问题，并想出了一种方法来帮助我克服这个问题，所以想分享一下。
set: Set<string> = new Set<string>();
onCellValueChanged(params: any) {
this.set.add(params.node.id);
}
onSubmit() {
this.set.forEach( id => console.log(JSON.stringify(this.grid.api.getRowNode(id).data)));
// call the api to update data
// clear the set post update call
this.set.clear();
}
在事件 cellValueChanged 上调用方法 onCellValueChanged。在该方法内，将正在编辑的行的行 ID 添加到集合中。提交数据时，迭代编辑的行 ID 集并使用 grid api 获取行。
检查https://www.ag-grid.com/javascript-grid-accessing-data/#for-each-node
有时你可能想迭代所有 rowNodes 网格。这可以使用网格的迭代 API 来完成。迭代 API 会遍历每个 rowNode，无论 rowNode 是否在 显示或不显示。例如，如果分组并且组已关闭，则 网格不会显示组的子项，但是子项 包含在迭代“for-each”方法中。
// iterate through every node in the grid
api.forEachNode( function(rowNode, index) {
console.log('node ' + rowNode.data.athlete + ' is in the grid');
});
// if the order of the iteration is important
api.forEachNodeAfterFilterAndSort( function(rowNode, index) {
console.log('node ' + rowNode.data.athlete + ' passes the filter and is in this order');
});
选择你需要的函数，然后将每一行的内容压入数组：
data = [];
api.forEachNode( function(rowNode, index) {
data.push(rowNode.data);
});
编辑用于检查要保存/未保存的行，您可以设置和获取它们的属性：https://www.ag-grid.com/javascript-grid-row-styles/
在创建和更改行单元格之一时将未保存设置为 true。
rowNode.setDataValue("unsaved", true);
然后进入
gridOptionsgridOptions.getRowStyle = function(params) {
if (params.node.node.getData().unsaved) {
return { background: 'red' }
}
}
如果这不起作用，请告诉我，我已经半年没有使用 aggrid 了。
无论您要更新多少行，只需在 onCellValueChanged 时再添加一个属性即可。
onCellValueChanged={onCellValueChanged} // adding in aggrid
const onCellValueChanged = (params) => {
params.node.data['changed'] = true; // change it while onCell change
};
和
使用它。
if(node.data.changed) {
// add your api call and all
}