Question

我正在使用ngGrid显示来自数据库的数据。使用ngGrid文档中描述的方法，我能够将网格中的更改写回我的数据库。但是，如果db响应写入错误，我无法找到恢复原始值的方法。

以下是我正在使用的单元格模板和更新功能：

var cellEditableTemplate = "<input ng-class=\"'colt' + col.index\" ng-input=\"COL_FIELD\" ng-model=\"COL_FIELD\" ng-blur=\"updateEntity(col, row, COL_FIELD)\" />";

$scope.updateEntity = function(column, row, cellValue){
    console.log(row.entity);
    console.log(column.field);
    console.log('Cell Value prior: ' + row.entity[column.field]);
    console.log('Cell Value after: ' + cellValue);

    //Trying to cache original value, i know this is wrong.
    var fail = row.entity[column.field];

    //row.entity[column.field] = cellValue;

    var map = {};
    map[column.field] = cellValue;

    //Code to prevent multiple ngBlur events
    //http://technpol.wordpress.com/2013/12/06/editable-nggrid-with-both-dropdowns-and-selects/
    if(!$scope.save) {
      $scope.save = {promise: null, pending: false, data: null};
    }

    $scope.save.data = map;
    if(!$scope.save.pending){
      $scope.save.pending = true;
      $scope.save.promise = $timeout(function(){
        //DB Write Function
        $scope.update(row.entity.id, $scope.save.data).then(
        function (result){
          //DB Write Success
          //Ensure new value is written to scope
          $scope.log("Table Updated", result);
          row.entity[column.field] = cellValue;
        }, function (error){
          //DB Write Failure
          //Need to revert to original value
          $scope.log("Error updating value", error);
          row.entity[column.field] = fail; //I know this doesn't work!
        });
        $scope.save.pending = false;
      }, 500);
    }
  };

对此代码的回顾清楚地表明，在模板中将ng-model设置为COL_FIELD意味着对单元格值的每次更新都会立即应用于范围。所以我需要的是一种在任何编辑发生之前缓存原始值的方法。

连连呢？

Answer 1

在editableCellTemplate中，使用ngFocus指令调用缓存行的函数：

ng-focus="cacheRow(row.entity)"

其中cacheRow（）看起来像这样：

$scope.cacheRow = function(startValue) {
  $scope.rowHolder = {};
  angular.copy(startValue, $scope.rowHolder);
};

然后在updateEntity（）中，您可以比较新值和旧值以查看它们是否相同（以避免不必要的更新），并在数据库更新失败时使用缓存行还原：

if (!angular.equals($scope.rowHolder, row.entity)) {
  //update here
  ...
  //on DB write fail, reset to $scope.rowHolder
}

Answer 2

有更简单的方法。在gridApi.edit.on.afterCellEdit中db-write失败后，您可以恢复旧值：

        $scope.gridOptions.onRegisterApi = function(gridApi){
            $scope.gridApi = gridApi;

            gridApi.edit.on.afterCellEdit($scope,function(rowEntity, colDef, newValue, oldValue) {
                if (colDef.name === 'comment' && newValue !== oldValue) {
                    var entity = new Entity();
                    entity.id = rowEntity.id;
                    entity.comment = newValue;
                    $scope.updateEntity(entity)
                        .then(function (value) {
                        },
                            function(error) {
                                rowEntity.comment = oldValue;
                                Messages.on_http_error(error);
                            });
                }
                $scope.$apply();
            });

};

$ scope.updateEntity（entity）是你应该返回promise的函数。

如果DB写入失败，则恢复到ngGrid中的原始单元格值

2 个答案: