I am using ui-grid to display my table in UI. I have a requirement where I don't want table to auto-save the data. I want user to edit all data in a table and click a button to update all the edited data.
我正在使用ui-grid在UI中显示我的表。我有一个要求,我不希望表自动保存数据。我希望用户编辑表格中的所有数据,然后单击按钮更新所有编辑的数据。
Above behavioud is working fine but only problem what I am getting is whenever a user edits a cell in a row, after few seconds, that cell becomes grey and uneditable. On browser cnsole I am getting this error:
上面的行为工作正常,但只有我得到的问题是每当用户在一行中编辑一个单元格,几秒钟后,该单元格变为灰色且不可编辑。在浏览器cnsole上我收到此错误:
A promise was not returned when saveRow event was raised, either nobody is listening to event, or event handler did not return a promise
引发saveRow事件时没有返回promise,无论是没有人正在侦听事件,还是事件处理程序没有返回promise
Because of above JS error, whole row becomes un-editable. How to tell ui-grid to don't save the data unless I click my button.
由于上面的JS错误,整行变得不可编辑。除非我点击我的按钮,否则如何告诉ui-grid不保存数据。
If I handle saveRow event then my button is not working. Please help me in this regard.
如果我处理saveRow事件,那么我的按钮不起作用。请帮助我这方面。
Here are the snippets of relevant codes:
以下是相关代码的片段:
var grid = {
data : 'hwData['+key+']',
paginationPageSizes: [25, 50, 75],
paginationPageSize: 25,
enableGridMenu: true,
enableFiltering: true,
enableSelectAll: true,
enableColumnResize : true,
exporterCsvFilename: 'myFile.csv',
exporterMenuPdf: false,
exporterCsvLinkElement: angular.element(document.querySelectorAll(".custom-csv-link-location")),
onRegisterApi: function(gridApi){
$scope.gridApi.push(gridApi);
gridApi.edit.on.afterCellEdit($scope,function(rowEntity, colDef, newValue, oldValue){
if(oldValue == newValue){
return false;
}
$("#test").prepend('<font color= "red"> ' +colDef.name+ 'Edited ');
})
},
..............some more code
..............
$.ajax({
type:'POST',
url:'/HardwareInventory/ajax/storage/edit_owned_storage',
data: jsonHostNames,
dataType:"json",
contentType: "application/json; charset=utf-8",
success : function(result){
if(result.status == "Success"){
location.reload(true);
}else{
bootbox.alert("Either hostname is not correct or you don't have permission to edit this team's data");
}
},
statusCode: {
500: function(){
alert("Oops!, there has been an internal error");
}
},
complete: function(result){
}
});
}
});
2 个解决方案
#1
5
Set "rowEditWaitInterval :-1" in your grid options and it will never call saveRow method by default , so you can save modified data in your custom method. And you can access dirtyrows like this
在网格选项中设置“rowEditWaitInterval:-1”,默认情况下它永远不会调用saveRow方法,因此您可以在自定义方法中保存修改后的数据。你可以访问这样的污垢
var dirtyRows = $scope.gridApi.rowEdit.getDirtyRows($scope.gridApi.grid);
#2
2
@Jha : Have a look on below url where I have just added fake save method, which will not save any data until you will define your save function inside it. http://plnkr.co/edit/T0TLGLpLsk25vY6SUnzR?p=preview
@Jha:看看下面的url,我刚刚添加了假保存方法,除非你在其中定义你的保存功能,否则不会保存任何数据。 http://plnkr.co/edit/T0TLGLpLsk25vY6SUnzR?p=preview
// Save each row data
//保存每一行数据
gridApi.rowEdit.on.saveRow($scope, $scope.saveRow);
$scope.saveRow = function (rowEntity) {
var promise = $q.defer();
$scope.gridApi.rowEdit.setSavePromise(rowEntity, promise.promise);
promise.resolve();
};
The above code will resolve your error"A promise was not returned when saveRow event was raised, either nobody is listening to event, or event handler did not return a promise". Do not forget to add "$q" in controller function. I hope your save function will also work properly.
上面的代码将解决您的错误“在引发saveRow事件时没有返回承诺,没有人正在侦听事件,或者事件处理程序没有返回承诺”。不要忘记在控制器功能中添加“$ q”。我希望你的保存功能也能正常工作。
#1
5
Set "rowEditWaitInterval :-1" in your grid options and it will never call saveRow method by default , so you can save modified data in your custom method. And you can access dirtyrows like this
在网格选项中设置“rowEditWaitInterval:-1”,默认情况下它永远不会调用saveRow方法,因此您可以在自定义方法中保存修改后的数据。你可以访问这样的污垢
var dirtyRows = $scope.gridApi.rowEdit.getDirtyRows($scope.gridApi.grid);
#2
2
@Jha : Have a look on below url where I have just added fake save method, which will not save any data until you will define your save function inside it. http://plnkr.co/edit/T0TLGLpLsk25vY6SUnzR?p=preview
@Jha:看看下面的url,我刚刚添加了假保存方法,除非你在其中定义你的保存功能,否则不会保存任何数据。 http://plnkr.co/edit/T0TLGLpLsk25vY6SUnzR?p=preview
// Save each row data
//保存每一行数据
gridApi.rowEdit.on.saveRow($scope, $scope.saveRow);
$scope.saveRow = function (rowEntity) {
var promise = $q.defer();
$scope.gridApi.rowEdit.setSavePromise(rowEntity, promise.promise);
promise.resolve();
};
The above code will resolve your error"A promise was not returned when saveRow event was raised, either nobody is listening to event, or event handler did not return a promise". Do not forget to add "$q" in controller function. I hope your save function will also work properly.
上面的代码将解决您的错误“在引发saveRow事件时没有返回承诺,没有人正在侦听事件,或者事件处理程序没有返回承诺”。不要忘记在控制器功能中添加“$ q”。我希望你的保存功能也能正常工作。