Использование кнопок «сохранить» и «отменить» в редактировании ячеек для Ag-grid
Я использую 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. Когда редактирование останавливается, если данные изменяются, мне нужно сделать вызов веб-API для обновления данных, все это работает, как и ожидалось. Но я хотел бы добавить кнопку сохранения и отмены прямо над сеткой и когда пользователь нажимает «Сохранить» только затем делает вызов веб-API, нажатие кнопки «Отмена» должно вернуть данные сетки к старым значениям. Я наткнулся на api stopEditing(true), но это не сработало. Не могли бы вы сообщить мне, как я могу реализовать эту функциональность.
Ответы 1
Попробуйте установить stopEditingWhenGridLosesFocus на false.
Затем добавьте две кнопки над сеткой: «Сохранить» и «Отмена».
При нажатии сохранить. вызовите onSave функцию, определение которой будет
onSave() {
this.agGrid.api.stopEditing();
this.callWebApi();
}
При нажатии кнопки «Отмена» вызовите функцию onCancel, определения которой будут
onCancel() {
this.agGrid.api.stopEditing(true);
}
Дайте мне знать, если это то, что вы искали.
@SébastienRicher stopEditing() принимает необязательный логический параметр, который вы можете использовать, чтобы сигнализировать о том, что редактирование следует отменить, а не сохранить.
Это очень близко к тому, что я ищу, что произойдет, если, например, у меня есть сообщение об ошибке от API, проверка бизнес-правил. Как «отменить» изменения в строке после «stopEditing»? Вместо этого я смотрю на получение значений из «getEditingCells», но тогда мне нужно немного влево-вправо, и я пытаюсь этого избежать. Спасибо!