如何使用“ag Grid”获取多个已编辑的行 |角答案

【问题标题】：How to get multiple edited rows using "ag Grid" | Angualr如何使用“ag Grid”获取多个已编辑的行 |角
【发布时间】：2020-04-09 15:33:04
【问题描述】：

我正在尝试识别用户编辑了哪些行，并通过 REST API 仅将已编辑的行保存到服务器。那么有人可以解释一下从列表中获取已编辑行的正确方法吗？

根据我的理解，我在数据集中添加了一个变量{ isEdited: false}，如果用户编辑了其中一个单元格，则显式将此变量从 false 设置为 true，然后在保存按钮上，我将迭代列表并获取具有isEdited=true

app.component.ts

import { Component, OnInit } from '@angular/core';
import { AgGridAngular } from 'ag-grid-angular';
import { CustomcellDropdownComponent } from '../customcell-dropdown/customcell-dropdown.component';
import { AllCommunityModules, Module } from '@ag-grid-community/all-modules';
@Component({
  selector: 'app-cellediting-container',
  templateUrl: './cellediting-container.component.html',
  styleUrls: ['./cellediting-container.component.css']
})
export class CelleditingContainerComponent {

  private gridApi;
  private gridColumnApi;

  private columnDefs;
  private components;
  private rowData;
  private editType;
  private editingRowIndex;

  constructor() {
    this.setDefinition();
    // this.components = { numericCellEditor: this.getNumericCellEditor() };
    this.rowData = this.getRowData();
    this.editType = "cell";
  }

  onCellClicked($event) {
    // check whether the current row is already opened in edit or not
    if (this.editingRowIndex != $event.rowIndex) {
      console.log($event);
      $event.api.startEditingCell({
        rowIndex: $event.rowIndex,
        colKey: $event.column.colId
      });
      this.editingRowIndex = $event.rowIndex;
    }
  }

  onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;
    params.api.sizeColumnsToFit();
  }
  setDefinition() {
    this.columnDefs = [
      {
        headerName: "Make",
        field: "make",
        editable: true,
        cellEditor: "agSelectCellEditor",
        rowDrag: true,
        cellEditorParams: {
          values: ["AAA", "BBB", "CCC"]
        }
      },
      {
        headerName: "Model",
        field: "model",
        editable: true
      },
      {
        headerName: "Price",
        field: "price",
        editable: true,
        // cellEditor: "numericCellEditor"
      },
      {
        headerName: "Suppress Navigable",
        field: "field5",
        editable: true,
        suppressNavigable: true
      },
      {
        headerName: "Not Editable",
        field: "field6",
        editable: false
      }
    ];
  }
  getRowData() {
    var rowData = [];
    for (var i = 0; i < 10; i++) {
      rowData.push({
        make: "Toyota",
        model: "Celica",
        price: 35000 + i * 1000,
        field5: "Sample 22",
        field6: "Sample 23",
        vm: { isEdited: null }
      });
      rowData.push({
        make: "Ford",
        model: "Mondeo",
        price: 32000 + i * 1000,
        field5: "Sample 24",
        field6: "Sample 25",
        vm: { isEdited: null }
      });
      rowData.push({
        make: "Porsche",
        model: "Boxter",
        price: 72000 + i * 1000,
        field5: "Sample 26",
        field6: "Sample 27",
        vm: { isEdited: null }
      });
    }
    return rowData;
  }

  // fucntion for save data

  saveData() {
    console.log('save data executed', this.rowData);
  }

}

app.component.html

<div>
  <button (click)="saveData()">Save</button>
</div>
<div style="height: 500px; padding-top: 30px; box-sizing: border-box;">
    <ag-grid-angular
    #agGrid
    style="width: 100%; height: 100%;"
    id="myGrid"
    class="ag-theme-balham"
    [columnDefs]="columnDefs"
    [rowDragManaged]="true"
    [animateRows]="true"
    [components]="components"
    [rowData]="rowData"
    [editType]="editType"
    (cellClicked)="onCellClicked($event)"
    (gridReady)="onGridReady($event)"
    ></ag-grid-angular>
</div>

【问题讨论】：

如果你找到任何答案，请分享并踢我：)

标签： angular typescript ag-grid-angular

【解决方案1】：

作为GridOptions 对象的一部分，有方便的onCellValueChanged(event: CellValueChangedEvent) 和onRowValueChanged(event: RowValueChangedEvent) 事件。在您的情况下，您可以使用 this.gridApi.onRowValueChanged = (event: CellValueChangedEvent) => { }; 为其绑定处理程序并在其中添加所需的实现。

【讨论】：