редакторы ячеек ag-grid - как сохранить данные в серверной части

#angular #ag-grid

Вопрос:

Не могли бы вы, пожалуйста, помочь мне с примером, который показывает сохранение данных в серверной службе после редактирования 1 / многих ячеек в angular js? Я нашел примеры того, как написать пользовательский редактор ячеек и использовать редакторы ячеек ag grid по умолчанию, но не смог найти, как и где подключить мой код, который сохраняет изменения в серверных службах?

1. Просто чтобы проверить, используете ли вы AngularJS? Или Angular 2-8?

2. Я использую Angular 6

3. Ах, хорошо. Я на мгновение смутился, потому что вы упомянули AngularJS

4. Вы хотите отправить всю сетку данных в серверную часть? Или только те, которые вы изменили?

5. Только те, которые я изменил.

Ответ №1:

Вы можете сохранить свои данные в Ag-Grid двумя способами.

1) Получить все данные и отправить все на серверную часть.

2) Получите только те строки, которые вы изменили, и отправьте эти строки в серверную часть. Если вы хотите прослушать конкретные изменения в определенной строке, вы можете использовать onCellValueChanged привязки событий при определении компонента ag-grid в вашем шаблоне компонента. В принципе, всякий раз, когда в ячейке происходят какие-либо изменения, вся строка будет «помечена» как измененная (присвоите пользовательскому свойству modified значение true).

Когда вам нужно отправить измененные строки на серверную часть, вы получаете все данные строки и отфильтровываете строки, в которых свойство ‘modified’ равно true .

Инициализируйте API параметров Ag-grid в своем компоненте.

Приведенный ниже код предназначен для # 2, поскольку это то, что вы ищете.

  <ag-grid-angular 
.
.
(gridReady)="onGridReady($event)"
(cellValueChanged)="onCellValueChanged($event)"
>

и в вашем component.ts метод onRowValueChanged будет запускаться каждый раз, когда вы вносите какие-либо изменения

 export class YourComponent {
  private gridApi;
  private gridColumnApi;
   .
   . 
  onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;
  }

  onCellValueChanged(event) {
    //console.log(event) to test it
    event.data.modified = true;
  }

  saveModifiedRows() {
    const allRowData = [];
    this.gridApi.forEachNode(node => allRowData.push(node.data));
    const modifiedRows = allRowData.filter(row => row['modified']);
    // add API call to save modified rows

  }