我正在尝试将行保存功能与可扩展网格结合使用。目标是能够独立于父行保存子网格行。
$scope.gridOptions = {
expandableRowTemplate: 'components/grid/orderLineTemplate.html',
expandableRowHeight: 150,
expandableRowScope: {
subGridVariable: 'subGridScopeVariable'
},
columnDefs: [
{field: '_id'},
{field: 'number'}
]
};
$http.get(ORDER_API)
.success(function (data) {
for (var i = 0; i < data.length; i++) {
var rowScope = data[i];
rowScope.subGridOptions = {
appScopeProvider: $scope,
columnDefs: [
{field: 'amount'},
{field: 'packageAmount'},
{field: 'carrierAmount'}
],
data: rowScope.orderLines,
saveRow : $scope.saveRow
}
}
$scope.gridOptions.data = data;
});
$scope.gridOptions.onRegisterApi = function (gridApi) {
$scope.gridApi = gridApi;
gridApi.rowEdit.on.saveRow($scope, $scope.saveRow);
};
$scope.saveRow = function (order) {
var promise = $q.defer();
$scope.gridApi.rowEdit.setSavePromise(order, promise.promise);
if(order.number) {
$http.put(ORDER_API + '/' + order._id, order).success(function () {
promise.resolve();
}).error(function () {
promise.reject();
});
}
}
});
编辑父行中的字段时,saveRow函数会被正确调用。当我编辑子行中的字段时,控制台中会显示以下消息
'引发saveRow事件时未返回promise,或者没有人在侦听事件,或者事件处理程序未返回promise'
从不为展开的子行调用SaveRow。
您需要注册子网格API。每个网格都有自己单独的API实例,您可以使用它与之通信:
rowScope.subGridOptions = {
appScopeProvider: $scope,
columnDefs: [
{field: 'amount'},
{field: 'packageAmount'},
{field: 'carrierAmount'}
],
data: rowScope.orderLines,
saveRow : $scope.saveRow,
onRegisterApi: function (gridApi) {
gridApi.rowEdit.on.saveRow($scope, $scope.saveRow)
}
}
这很接近,但您正在使用appScopeProvider将我们的控制器作用域注入子网格作用域,这实际上并不需要。相反,我们可以使saveRow通用,并将其绑定到我们想要的gridApi。bind()
的第一个自变量设置函数的this
。我们只传入网格对象,但不需要它。要绑定的第二个参数将是我们要传递的gridApi。然后在saveRow定义中,我们知道我们将接收正确的API作为第一个参数,然后接收rowEntity作为第二个arg。
// Main grid:
$scope.gridOptions.onRegisterApi = function(gridApi) {
gridApi.rowEdit.on.saveRow($scope, saveRow.bind(gridApi.grid, gridApi));
};
// Subgrids:
onRegisterApi: function(gridApi) {
gridApi.rowEdit.on.saveRow($scope, saveRow.bind(gridApi.grid, gridApi));
}
// Altered saveRow:
function saveRow(gridApi, rowEntity) {
var promise = $q.defer();
gridApi.rowEdit.setSavePromise( rowEntity, promise.promise );
// fake a delay of 3 seconds whilst the save occurs, return error if gender is "male"
$interval( function() {
if (rowEntity.gender === 'male' ){
promise.reject();
} else {
promise.resolve();
}
}, 3000, 1);
};
由于您的子图可能有不同的保存函数,因此需要记住的主要事项是使用onRegisterApi
在它们上注册"saveRow"事件
下面是一个正在工作的plunker演示上面的代码:http://plnkr.co/edit/52mp9C?p=preview
如果使用Angular$http或$resource,则不必创建任何其他"延迟"对象,只需返回结果:
$scope.saveRow = function (order) {
// with use $http
var promise = $http.put(ORDER_API + '/' + order._id, order);
// or with use $resource
var promise = $resource(ORDER_API + '/:id').save({ id: order._id }, order).$promise;
$scope.gridApi.rowEdit.setSavePromise(order, promise);
return promise;
}
您已经在代码中创建了一个延迟承诺。由于错误清楚地表明您需要返回promise,因此您应该将return deferred.promise;
添加到代码中。我认为你也应该从其他声明中返回一个承诺,以便无论如何都能得到承诺的解决/拒绝。
代码
$scope.saveRow = function(order) {
var deferred = $q.defer();
$scope.gridApi.rowEdit.setSavePromise(order, promise.promise);
if (order.number) {
$http.put(ORDER_API + '/' + order._id, order).success(function() {
deferred.resolve();
}).error(function() {
deferred.reject();
});
} else {
deferred.reject();
}
return deferred.promise; //this will return promise to caller function.
};
希望这能对你有所帮助,如果还需要什么,请告诉我。谢谢。:)