javascript - 无法在Angular UI Grid中的可扩展行中保存行

我正在尝试将row saving功能与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函数。当我在子行中编辑字段时，控制台中会显示以下消息；
“引发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将我们的 Controller 范围注入(inject)到子网格范围中，您实际上并不需要这样做。相反，我们可以使saveRow通用并将其绑定(bind)到所需的gridApi上。 bind()的第一个参数设置函数的this。我们只传递网格对象，但不需要它。绑定(bind)的第二个参数将是我们要传递的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