typescript 如何在Ag-grid中获取更新的日志

nhn9ugyo 于 7个月前发布在 TypeScript

关注(0)|答案(4)|浏览(95)

点击“插入新行”按钮后，下面的方法被触发，一个空的新行被附加到当前的最后一行。

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

型

typescript

来源：https://stackoverflow.com/questions/50270060/how-to-get-updated-rows-in-ag-grid

4条答案

按热度按时间

vzgqcmou1#

另一种方法是在对象中保留标志以标识其新的/修改的，

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

型

赞(0）回复(0）举报 7个月前

k4ymrczo2#

回答这个问题有点晚了，但最近我面临着同样的问题，并提出了一种帮助我克服这个问题的方法，所以想分享同样的东西。

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添加到set中，提交数据时遍历编辑的行id集合，使用网格API获取行。

赞(0）回复(0）举报 7个月前

vjrehmav3#

查看https://www.ag-grid.com/javascript-grid-accessing-data/#for-each-node
有时，您可能希望遍历网格中的所有rowNode。这可以使用网格的迭代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);
});

型

EDIT用于检查要保存/不保存的行，可以设置和获取其属性：https://www.ag-grid.com/javascript-grid-row-styles/

在创建和更改行的一个单元格时将unsaved设置为true。

rowNode.setDataValue("unsaved", true);

型
并执行gridOptions的获取，这样你就可以为所有编辑/插入的行设置一个“未保存”的样式：

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

型
如果这不管用就告诉我，我已经半年没和阿格列一起工作了。

赞(0）回复(0）举报 7个月前

5lwkijsr4#

不管你要更新多少行，只要在onCellValueChanged的时候再添加一个属性就行了。

onCellValueChanged={onCellValueChanged} // adding in aggrid

个字符
和
使用它.

if(node.data.changed) {

// add your api call and all
}

型

赞(0）回复(0）举报 7个月前

我来回答

typescript 如何在Ag-grid中获取更新的日志

4条答案

相关问题

热门标签

最新问答