时间戳

首页 > 解决方案 > 在保存所有按钮单击时从 Angular slick-grid 获取所有已编辑的行

angular - 在保存所有按钮单击时从 Angular slick-grid 获取所有已编辑的行

问题描述

我有一个 Ionic 应用程序，我在其中使用 Angular slick-grid 进行内联编辑来编辑网格。就我而言，用户将进行所有必要的更改，最后在“全部保存”按钮上单击所有已编辑的必须在数据库中更新。我想知道默认情况下是否有任何方法可以从网格/数据集中提取已编辑的记录，而不是维护用于存储已编辑记录 ID 的外部变量。

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

标签： angularionic-frameworkslickgridangular-slickgrid

解决方案

您可以使用编辑命令队列来了解更改了哪些项目，当出现任何错误或只想撤消时，此队列对于执行“撤消”很有用。队列跟踪所有项目行/单元格索引及其修改之前/之后的值，您可以从那里获取所有项目，一旦您“全部保存”，您就可以重置该队列。

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 = [];
  }
}

推荐阅读