从Angular slick-grid中获取所有编辑过的行，点击保存所有按钮。

Question

我有一个Ionic应用，我使用Angular slick-grid进行内联编辑。在我的例子中，用户将进行所有必要的修改，最后在 "编辑 "页面上完成。点击 "保存所有 "按钮 所有的编辑都要在DB中更新。我想知道是否有 有什么办法可以默认从网格数据集中提取编辑过的记录？ 而不是维护一个外部变量来存储已编辑的记录ID。

//I use this method to update the dataset.    
onCellChanged(e, args) {
        this.angularGrid.gridService.updateDataGridItemById(args.item['id'], args.item);
    }

Answer 1

你可以使用编辑命令队列来了解哪些项目被修改了，当有任何错误或你只是想撤销时，这个队列对做 "撤销 "很有用。这个队列记录了所有被修改的项目的rowcell索引和它们在修改前的值，你可以从那里得到所有的项目，一旦你 "保存所有"，你就可以重置这个队列。

export class MyComponent {
  private angularGrid: AngularGridInstance;
  private dataViewObj: any;
  private gridObj: any;
  private editQueue = [];

  angularGridReady(angularGrid: AngularGridInstance) {
    this.angularGrid = angularGrid;
    this.gridObj = angularGrid.slickGrid;
    this.dataViewObj = angularGrid.dataView;
  }

  prepareGrid() {
    this.columnDefinitions = [ /*...*/ ];

    this.gridOptions = {
      autoEdit: true,
      editable: true,
      enableCellNavigation: true,
      editCommandHandler: (item, column, editCommand) => {
        this.editQueue.push(editCommand); // <-- last edit command
        editCommand.execute();
      },
    };
  }

  handleOnErrorCallback(error, gridObj) {
     // undo last edit in the grid
     const lastEdit = this.editQueue.pop();
     if (lastEdit && lastEdit.command) {
        lastEdit.command.undo();
        gridObj.gotoCell(lastEdit.command.row, lastEdit.command.cell, false);
     }
     return false;
  }

  saveAll() {
     // for example, to get the last Edit, you could type get it this way
     // const lastEdit = this.editQueue[this.editQueue.length - 1];
     // const lastEditField = lastEdit && lastEdit.column && lastEdit.column.field;

     const editItems = [];

     // in your case, you would want to loop through the entire queue
     this.editQueue.forEach((editObj) => {
       const previousValue = editObj.prevSerializedValue;
       const newValue = editObj.serializedValue;
       const rowIndex = editObj.row; // from the row index, you can get the item
       const item = this.angularGrid.dataView.getItem(rowIndex);

       // do what you want with the value or item
       editItems.push(item);
     });

     // call your save all method
     // this.saveInDb(editItems);

     // don't forget to reset your edit queue to restart with a new batch of edits
     this.editQueue = [];     
  }
}

其实在写完这篇文章之后，我才发现，直接从列表中获取一个项目数组可能会更容易。editCommandHandler

export class MyComponent {
  private editItems = [];

  prepareGrid() {
    this.columnDefinitions = [ /*...*/ ];

    this.gridOptions = {
      autoEdit: true,
      editable: true,
      enableCellNavigation: true,
      editCommandHandler: (item, column, editCommand) => {
        this.editItems.push(item);
        this.editQueue.push(editCommand); // <-- last edit command
        editCommand.execute();
      },
    };
  }

  saveAll() {
    // call your save all method
    // this.saveInDb(editItems);

    // don't forget to reset your edit queue to restart with a new batch of edits
    this.editQueue = [];   
    this.editItems = [];
  }
}