Ich arbeite an einer kleinen Frontend-Anwendung, die verschiedene Produktversanddaten in einem UI-Grid anzeigen wird.
Ich habe den folgenden 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
Meine Frage ist in Bezug auf die Methode $ scope.saveRow. Ich habe über die Dokumentation here geschaut und versucht, auf Google zu suchen (nicht viel draußen für ui-Gitter), aber ich stolpere noch eine Sackgasse, weil ich ein wenig unerfahren mit diesem bin und ich bin nicht sicher, wie man kodiert das richtig mit Versprechungen.
Es wird eine MVC-App dahinter laufen, die die Daten an das Frontend pushen und Tabellenänderungen in einer SQLServer-Datenbank speichern wird. Offensichtlich möchte ich, dass diese $ scope.saveRow-Funktion die rowEnttiy-Daten korrekt an meine MVC-App zurücksendet, aber auch hier bin ich nicht sicher, wie ich die Funktion schreiben soll. Die "falschen" Versprechungen, die im Beispiel enthalten sind, reichen nicht aus, um zu verstehen, was ich zu tun habe. Ich versuchte zunächst folgende:
$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");
}
};
aber diese wirft nur eine Ausnahme in meiner Konsole, die ein Versprechen nicht zurückgegeben wurde, wenn das saveRow Ereignis ausgelöst wird.
Aus irgendeinem Grund fehlt der '$ scope.gridApi.grid' Teil der' setSavePromise' Methode in der Dokumentation, also vielen Dank für das Posten. Ich habe meinen Kopf über eine Stunde lang gegen eine Wand geschlagen und versucht, dies zur Arbeit zu bringen. – Samsquanch
Es gibt keinen Grund, ein neues Versprechen zu erstellen. Geben Sie einfach das Versprechen zurück, das $ http bietet – codemonkey
Nur um zu verdeutlichen, verwiesen @ Codemonkey-Kommentar auf eine frühere Version dieser Antwort, die jetzt korrigiert wurde. Danke @codemonkey! –