如何在 Ag-grid 中获取更新的行

Question

单击 "Insert New Row" 按钮后，将触发以下方法并将一个空的新行附加到当前最后一行。

insertNewRow(){

    var newItem = this.createNewRowData();
    var res = this.gridOptions.api.updateRowData({add: [newItem]});

  }

createNewRowData(){
    var newData = [];
    //blah blah
    return newData;
  }

在我丰富了屏幕上的数据之后，我怎样才能让网格拾取新行（可能还有自上次数据库检索以来已更改的所有行）？

请注意，在点击“保存”按钮之前，我可以多次点击 "Insert New Row" 以创建多行。

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"}

Answer 1

其他方法是在对象中保留标志以识别其 new/modified、

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
 }
});

Answer 2

勾选https://www.ag-grid.com/javascript-grid-accessing-data/#for-each-node

Sometimes you may want to iterate through all the rowNodes in the grid. This can be done using the grid's iteration APIs. The iteration APIs go through every rowNode, regardless of whether the rowNode is displayed or not. For example if grouping and the group is closed, the group's children are not displayed by the grid, however the children are included in the iteration 'for-each' methods.

// 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);
});

EDIT for checking rows to be saved/unsaved you can set and get their attributes: https://www.ag-grid.com/javascript-grid-row-styles/

在创建和更改其中一个单元格时将未保存设置为真。

rowNode.setDataValue("unsaved", true);

并在 gridOptions 中执行获取操作，因此您可以为所有 edited/inserted 行设置 "unsaved" 样式：

gridOptions.getRowStyle = function(params) {
    if (params.node.node.getData().unsaved) {
        return { background: 'red' }
    }
}

如果这不起作用，请告诉我，我已经半年没有使用 aggrid 了。

Answer 3

回答这个问题有点晚了，但最近我遇到了同样的问题，想出了一个方法帮助我克服了这个问题，所以想分享一下。

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 集并使用网格 api.

获取行

如何在 Ag-grid 中获取更新的行

How to Get Updated Rows in Ag-grid

typescript

ag-grid

angular