Использование кнопок «Сохранить» и «Отмена» в редактировании ячеек для Ag-сетки - PullRequest
Новая
       11

Использование кнопок «Сохранить» и «Отмена» в редактировании ячеек для Ag-сетки

0 голосов
/ 09 апреля 2019

Я использую Ag-grid в своем приложении Angular, и данные в сетке заполняются из веб-службы.Я реализовал редактирование ячеек в этой сетке, поэтому, когда я щелкаю по одному из столбцов, вся строка будет редактируемой, а когда я щелкаю вне сетки, редактирование прекращается.Ниже приведен код в html и файле компонента: 

<ag-grid-angular #agGrid style="width: 100%; height: 600px;" class="ag-theme-balham left" [rowData]="rowData" [columnDefs]="columnDefs"
                            [gridOptions]="gridOptions" rowSelection="multiple" pagination=true (rowSelected)="onRowSelected($event)">
                        </ag-grid-angular>

файл component.ts: 

this.gridOptions = {
                defaultColDef: {
                    editable: (event: any) => {
                        if (this.isGridDataEditable) {
                            return true;
                        } else {
                            return false; // true/false based on params (or some other criteria) value
                        }
                    },
                    filter: true
                },
                singleClickEdit: true,
                stopEditingWhenGridLosesFocus: true,
                paginationPageSize: 20,
                editType: 'fullRow',
                onCellValueChanged: (event: any) => {
                },
                onRowValueChanged: (event: any) => {
                },
                onRowEditingStopped: (event: any) => {
                }
            };
        }

Определения столбцов генерируются динамически на основе ответа от веб-API.Когда редактирование останавливается, если данные изменяются, тогда мне нужно позвонить в web api для обновления данных, все это работает как положено. Но я хотел бы добавить кнопку сохранения и отмены чуть выше сетки и когда пользовательнажмите «Сохранить только», затем вызовите веб-интерфейс API, нажмите кнопку «Отмена», чтобы вернуть данные сетки к старым значениям.Я наткнулся на api stopEditing (true), но он не работал.Не могли бы вы, пожалуйста, дайте мне знать, как я мог достичь этой функциональности.

1 Ответ

2 голосов
/ 11 апреля 2019

Попробуйте установить stopEditingWhenGridLosesFocus в false.

Затем добавьте две кнопки над сеткой, Сохранить и Отменить.

При нажатии сохранить.вызовите onSave функцию, определение которой будет 

onSave() {
  this.agGrid.api.stopEditing();
  this.callWebApi();
}

При нажатии кнопки отмены вызовите onCancel функцию, определения которой будут 

onCancel() {
  this.agGrid.api.stopEditing(true);
}

Дайте мне знать, если это то, что вы искалидля.

...