I'm working on a small frontend application which will show various product shipping data in a ui-grid.
我正在开发一个小型前端应用程序,它将在ui-grid中显示各种产品运输数据。
I have the following code:
我有以下代码:
HTML:
<body ng-controller="MyCtrl">
<p ng-repeat="row in myData">{{row.name}} works at {{row.company}}</p>
<button type="button" class="btn btn-success" ng-click="getCurrentFocus()">Get Current focused cell</button> <span ng-bind="currentFocused"></span>
<br/>
<br/>
<div id="grid1" ui-grid="gridOptions" external-scopes="editRows" ui-grid-edit ui-grid-row-edit ui-grid-pinning ui-grid-paging ui-grid-cellnav class="grid"></div>
</body>
AngularJS:
var app = angular.module('webapps', ['ngAnimate', 'ui.grid', 'ui.grid.edit', 'ui.grid.rowEdit', 'ui.grid.pinning', 'ui.grid.paging', 'ui.grid.cellNav']);
app.controller('MyCtrl', ['$scope', '$http', '$q', '$interval', function ($scope, $http, $q, $interval) {
//Column definitions
$scope.columns = [
{ field: 'name', displayName: 'First Name', width: 300},
{ field: 'lastname', displayName: 'Last Name', width: 300 },
{ field: 'email', displayName: 'Email', width: 300 },
{ field: 'company', displayName: 'Company', width: '50%' }
];
//Options for displaying the grid
$scope.gridOptions = {
data: 'myData',
enableCellEditOnFocus: false,
pagingPageSizes: [2, 5, 7],
pagingPageSize: 5,
enableSorting: true,
enableGridMenu: true,
columnDefs: $scope.columns,
onRegisterApi: function (gridApi) {
$scope.gridApi = gridApi;
//var cellTemplate = '<button class="btn primary" ng-click="getExternalScopes().showMe(rowCol.row.entity)">Edit</button>'; //'ui-grid/selectionRowHeader'; // you could use your own template here
//$scope.gridApi.core.addRowHeaderColumn({ name: 'rowHeaderCol', displayName: '', width: 50, pinnedLeft: true, cellTemplate: cellTemplate });
gridApi.rowEdit.on.saveRow($scope, $scope.saveRow);
}
};
// Save row data on edit 1 - TESTING
$scope.saveRow = function (rowEntity) {
// create a fake promise - normally you'd use the promise returned by $http or $resource
var promise = $http.post("Webapps/Home/SaveRow");
$scope.gridApi.rowEdit.setSavePromise($scope.gridApi.grid, rowEntity, promise.promise);
console.log(rowEntity);
// fake a delay of 3 seconds whilst the save occurs, return error if gender is "male"
$interval(function () {
if (rowEntity.lastname === ' ') {
promise.reject();
} else {
promise.resolve();
}
}, 3000, 1);
};
}]); // End of MyCtrl
My question is in regards to the $scope.saveRow method. I've looked over the documentation here and tried searching on google (not much out there for ui-grid) but I'm still hitting a dead end as I'm a bit inexperienced with this and I'm not sure how to code this properly with promises.
我的问题是关于$ scope.saveRow方法。我已经查看了这里的文档并尝试在谷歌上搜索(对于ui-grid来说并不多)但是我仍然处于死路,因为我对此有点缺乏经验并且我不确定如何编码这恰好与承诺。
There will be an MVC app running behind this which will handle pushing the data to the front end and saving table edits to a SQLServer db. Obviously what I'd like to do is have this $scope.saveRow function properly send the rowEnttiy data back to my MVC app but, again, I'm at a loss for how to code the function. The "fake" promises included in the example aren't enough for me to get a grasp on what I need to do, apparently. I initially tried the following:
将在此后面运行一个MVC应用程序,它将处理将数据推送到前端并将表编辑保存到SQLServer数据库。显然我想要做的是让这个$ scope.saveRow函数正确地将rowEnttiy数据发送回我的MVC应用程序,但是,再次,我对如何编写函数感到茫然。显然,包含在示例中的“虚假”承诺不足以让我掌握我需要做的事情。我最初尝试了以下内容:
$scope.saveRow = function (rowEntity) {
try {
// Need actual URL for post...controller has to accept 'row'
$http.post("Webapps/Home/SaveRow", { row: rowEntity }).success(function (data, status, headers, config) {
console.log("post success");
console.log(rowEntity);
}).error(function (data, status, headers, config) {
console.log("post failure");
console.log(rowEntity);
});
} catch (e) {
alert("Something went wrong");
}
};
but this only throws an exception in my console that a promise was not returned when the saveRow event is raised.
但这只会在我的控制台中抛出一个异常,即在引发saveRow事件时未返回promise。
3 个解决方案
#1
8
You would normally do the promise/api call in a separate repository, but basically the code you are looking for is something like this:
您通常会在单独的存储库中执行promise / api调用,但基本上您要查找的代码是这样的:
$scope.saveRow = function( rowEntity ) {
var promise = $scope.someRepositoryFunction(rowEntity);
$scope.gridApi.rowEdit.setSavePromise($scope.gridApi.grid, rowEntity, promise);
// fake a delay of 3 seconds whilst the save occurs, return error if gender is "male"
//$interval( function() {
// if (rowEntity.firstName === 'male' ){
// promise.reject();
// } else {
// promise.resolve();
// }
//}, 3000, 1);
};
$scope.someRepositoryFunction = function(row) {
return $http.put('/Home/UpdateRow',row);
}
#2
6
I'm not allowed to comment so I have to submit an answer. The answer above is incorrect in that the $scope.gridApi.grid parameter to teh setSavePromise function is NOT required. Although the function does require a grid parameter, it is added by the wrapper during the .apply call.
我不允许发表评论所以我必须提交答案。上面的答案是不正确的,因为不需要$ scope.gridApi.grid参数来设置setSavePromise函数。尽管该函数确实需要网格参数,但在.apply调用期间它由包装器添加。
#3
2
I had actually used the code submitted by punkologist and it was indeed working but there seemed to be errors in the console on resolving promise after including $interval.
我实际上已经使用了朋克学家提交的代码并且确实有效,但是在包括$ interval之后,控制台上的解决方案似乎存在错误。
I guess the following is the appropriate code to make it run error free. Hope it works.
我想以下是适当的代码,使其无错运行。希望它有效。
$scope.saveRow = function( rowEntity ) {
var promise = $q.defer();
$http.put('/Home/UpdateRow',row).success(function(){
$interval(function(){
promise.resolved();
},3000, 1)
}).error(promise.reject);
$scope.gridApi.rowEdit.setSavePromise($scope.gridApi.grid, rowEntity, promise);
};
#1
8
You would normally do the promise/api call in a separate repository, but basically the code you are looking for is something like this:
您通常会在单独的存储库中执行promise / api调用,但基本上您要查找的代码是这样的:
$scope.saveRow = function( rowEntity ) {
var promise = $scope.someRepositoryFunction(rowEntity);
$scope.gridApi.rowEdit.setSavePromise($scope.gridApi.grid, rowEntity, promise);
// fake a delay of 3 seconds whilst the save occurs, return error if gender is "male"
//$interval( function() {
// if (rowEntity.firstName === 'male' ){
// promise.reject();
// } else {
// promise.resolve();
// }
//}, 3000, 1);
};
$scope.someRepositoryFunction = function(row) {
return $http.put('/Home/UpdateRow',row);
}
#2
6
I'm not allowed to comment so I have to submit an answer. The answer above is incorrect in that the $scope.gridApi.grid parameter to teh setSavePromise function is NOT required. Although the function does require a grid parameter, it is added by the wrapper during the .apply call.
我不允许发表评论所以我必须提交答案。上面的答案是不正确的,因为不需要$ scope.gridApi.grid参数来设置setSavePromise函数。尽管该函数确实需要网格参数,但在.apply调用期间它由包装器添加。
#3
2
I had actually used the code submitted by punkologist and it was indeed working but there seemed to be errors in the console on resolving promise after including $interval.
我实际上已经使用了朋克学家提交的代码并且确实有效,但是在包括$ interval之后,控制台上的解决方案似乎存在错误。
I guess the following is the appropriate code to make it run error free. Hope it works.
我想以下是适当的代码,使其无错运行。希望它有效。
$scope.saveRow = function( rowEntity ) {
var promise = $q.defer();
$http.put('/Home/UpdateRow',row).success(function(){
$interval(function(){
promise.resolved();
},3000, 1)
}).error(promise.reject);
$scope.gridApi.rowEdit.setSavePromise($scope.gridApi.grid, rowEntity, promise);
};