ag-grid в angular5 рядное встроенное редактирование

Я хочу знать, как лучше всего предоставить пользователю встроенное редактирование в ag-сетке при нажатии кнопки.

см. изображение ниже. введите здесь описание изображения

В соответствии с моими требованиями, если пользователь нажимает значок редактирования, строка ag-grid переходит в режим редактирования полной строки (это можно сделать из документации, предоставленной onag-grid.com), и в то же время значки в столбце «Действие» изменяются для сохранения и отменить значки. Итак, хочу знать, как это можно сделать в Angular5. Мне нужна идея динамического изменения этого последнего столбца.


ag-grid inline-editing angular5
person ghetal    schedule 18.01.2018    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Здесь есть несколько шагов, которые вам необходимо выполнить.

Шаг 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 }
  ];
}
person KnaveT    schedule 08.05.2018
comment
К сожалению, это решение не работает, потому что [suppressClickEdit] = true не мешает сетке выводить текущую строку из режима редактирования, когда пользователь щелкает другую строку или сортирует сетку. Когда это происходит, он обходит методы сохранения и отмены - ни сохранение данных в базе данных, ни восстановление предыдущих данных в той строке, которая редактировалась. Вы знаете, как решить эту проблему? - person Aceofspades25; 12.12.2018
comment
@ Aceofspades25 У меня тоже проблема. Вы нашли решение для того же? - person Jaffer Sathick; 11.04.2019

arrow_upward
1
arrow_downward

Я просто искал что-то похожее, и поэтому подумал, что поделюсь своими действиями, чтобы это работало. Я новичок в 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;
}

Надеюсь, это поможет направить вас в правильном направлении.

person pickledtink    schedule 08.02.2018