无法在 Angular UI 网格中的可扩展行中保存行

Question

我正在尝试使用 row saving feature in combination with the expandable grid。目标是能够独立于父行保存子网格行。

$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 函数被正确调用。当我编辑子行中的字段时，控制台中出现以下消息；
'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。

Answer 1

您需要注册子网格 APIs。每个网格都有自己单独的 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 作为第二个参数。

// 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

Answer 2

您已经在代码中创建了延迟承诺。由于错误清楚地表明您需要 return 一个承诺，因此您应该将 return deferred.promise; 添加到您的代码中。我认为您还应该 return 来自 else 语句的承诺，以便无论如何得到承诺 resolve/reject。

代码

$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.
};

希望这对您有所帮助，如果还有其他需要，请告诉我。谢谢。 :)

Answer 3

如果您使用 Angular $http 或 $resource，则无需创建任何其他 'deferred' 对象，只需 return 结果：

$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;
  }

无法在 Angular UI 网格中的可扩展行中保存行

Not able to save row in Expandable row in Angular UI Grid

javascript

angularjs

angular-ui

angular-ui-grid