angular5行内联编辑中的ag-grid

Question

我想知道在按钮点击时我可以在ag-grid中进行用户内联编辑的最佳方式。

见下图。

根据我的要求，如果用户点击编辑图标，则ag-grid行进入fullrow编辑模式（可以通过ong-grid.com提供的文档），同时，'Action'列中的图标更改以保存和取消图标。所以，想知道如何在Angular5中完成这项工作。我需要动态更改最后一列的想法。

Answer 1

这里有很多步骤需要实施。

步骤1：创建自定义渲染器组件

@Component({
  selector: 'some-selector',
  template: `
     <span *ngIf="!this.isEditing">
       <button (click)="doEdit()">Edit</button>
     </span>
     <span *ngIf=this.isEditing">
       <button (click)="doSave()">Save</button>
       <button (click)="doCancel()">Cancel</button>
     </span>
  `
})
export class MyRenderer implements ICellRendererAngularComp {
    isEditing = false;
    params: any;

    agInit(params: any): void {
      this.params = params;          
    }

    doEdit() {
      // we need to loop thru all rows, find the column with the renderer, and 'cancel the edit mode'.
      // otherwise, we will end up with rows that has SAVE buttons appearing but not in edit mode
      const renderersInOtherRows = this.params.api.getCellRendererInstances(this.params);

      if( renderersInOtherRows && renderersInOtherRows.length > 0 ) {
        for ( let i=0; i<renderersInOtherRows.length; i++) {
          const wrapper = renderersInOtherRows[i];
          if ( wrapper.getFrameworkComponentInstance() instanceof MyRenderer ) {
            const foundRenderer = wrapper.getFrameworkComponentInstance() as MyRenderer;
            if( foundRenderer.isEditing ) {
              foundRenderer.doCancel();
            }
          }
        }
      }

      this.isEditing = true;

      this.params.api.startEditingCell( { rowIndex: this.params.node.rowIndex, colKey: 'some-col-field-name'});
    }

    doCancel() { 
      this.isEditing = false;
      // restore previous data or reload
    }
    doSave() { 
      this.isEditing = false;
      // do your saving logic
    }

}

第2步：加载组件

@NgModule({
  imports:[
     AgGridModule.withComponents([MyRenderer]),
     // ...
  ],
  declarations: [MyRenderer],
})
export class MyModule();

步骤3：使用组件

SuppressClickEdit = true，将阻止双击/单击编辑模式

@Component({
   selector: 'my-grid',
   template: `
    <ag-grid-angular #grid
        style="width: 100%; height: 500px;" 
        class="ag-theme-balham"
        [rowData]="this.rowData"
        [columnDefs]="this.columnDefs"
        [editType]="'fullRow'"
        [suppressClickEdit]="true"></ag-grid-angular>
   `
})
export class MyGridComponent implements OnInit {
  columnDefs = [
     // ... other cols
     { headerName: '', cellRendererFramework: MyRenderer }
  ];
}

Answer 2

我只是在找类似的东西，所以我想我会分享我做的工作。我是Angular的新手，所以这可能不是最好的方法。

这是我的component.html

<button (click)="onEdit()">edit button</button>
<button (click)="onSaveEdit()" *ngIf="!editClicked">save button</button>
<button (click)="onCancelEdit()" *ngIf="!editClicked">cancel</button>

这是我的component.ts

public params: any;

private editClicked;

  constructor() {
  this.editClicked = true;
  }

  agInit(params: any): void{
   this.params = params;
  }

onEdit() {
 this.editClicked = !this.editClicked;
 this.params.api.setFocusedCell(this.params.node.rowIndex, 'action');
 this.params.api.startEditingCell({
  rowIndex: this.params.node.rowIndex,
  colKey: 'action'
 });
}

onSaveEdit() {
 this.params.api.stopEditing();
 this.editClicked = !this.editClicked; 
}

onCancelEdit() {
 this.params.api.stopEditing(true);
 this.editClicked = !this.editClicked;
}

希望这有助于引导您朝着正确的方向前进。