Question

这个问题对我来说很难，因为我是AngularJS及其许多概念的新手。我正在使用ui-grid。我有on.afterCellEdit调用角度工厂（在我的rEST API上执行PUT）。

我想通过恢复单元格中的值并向用户提供反馈来处理错误和超时。怎么办呢？

工厂：

angular.module('angularApp')
       .factory('serviceAjax', function serviceAjax($http) {

  function putTransactionSuccessFn(data, status, headers, config) {
    console.log("Vla ça marche");
  }

  function putTransactionErrorFn(data, status, headers, config) {
    console.log(data);
    console.log(data.config);
    console.log(headers);
    console.log(config);
  }

  // Public API here
  return {
    getTransactions: function(client, transaction){
        return $http.get("http://localhost:8000/api/transaction/"+client+"/" + transaction);
    },
    putTransaction: function(row){
        return $http.put("http://localhost:8000/api/trcompinfos/"+row.pk+"/",row).then(putTransactionSuccessFn,putTransactionErrorFn);
    }
  }
});

控制器：

angular.module('angularApp')
       .controller('TransactionsCtrl', function ($scope, $routeParams, serviceAjax, uiGridGroupingConstants) {
  $scope.client = $routeParams.client;
  $scope.transaction = $routeParams.transaction;
  $scope.table = {
    enableFiltering: true,
    enableGridMenu: true,
    exporterMenuPdf: false,
    exporterCsvFilename: $scope.client + '_' + $scope.transaction + '.csv',
    onRegisterApi: function( gridApi ) {
      $scope.gridApi = gridApi;
      gridApi.edit.on.afterCellEdit($scope, $scope.saveRow);
      $scope.gridApi.grid.registerDataChangeCallback(function() {
        $scope.gridApi.treeBase.expandAllRows();
      });
    },

  }
  var loadTransactions = function(){
    serviceAjax.getTransactions($scope.client,$scope.transaction).success(function(data){
      $scope.results = data;
      var header_cols_before = [{name:'Date',field:'report_date',grouping: { groupPriority: 0 }, sort: { priority: 0, direction: 'desc' }},
                                {name:'SID', field:'target.sid', grouping: { groupPriority: 1}, sort: {priority: 1, direction: 'asc'}},
                                {name:'ID', field:'pk'} ];
      var header_cols_after = [ {name:'Current Status' ,field:'current_status', editableCellTemplate: 'ui-grid/dropdownEditor', editDropdownValueLabel: 'Current Status',
      editDropdownOptionsArray: [
        { id: 'E', 'Current Status': 'Error' },
        { id: 'N', 'Current Status': 'No  error' },
        { id: 'W', 'Current Status': 'Warning' },
        { id: 'A', 'Current Status': 'Acknowledged Error' }],cellFilter: 'mapCurStat'},
                                {name:'Analysis', field:'analysis'},
                                {name:'Action',field:'action'},
                                {name:'Who',field:'who'},
                                {name:'Notes',field:'notes'}];
      var header_cols_middle = [];
      if ( data.length > 0) 
        {
          for (var key in data[0])
            {
              if ( typeof data[0][key] == 'object' && key == 'tr_comp')
                {
                  for (var key_inner in data[0][key])
                    {
                      if ( typeof data[0][key][key_inner] == 'object' && key_inner == 'custom_cols')
                        {
                          for (var key_inner_inner in data[0][key][key_inner])
                            {
                              header_cols_middle.push({name:key_inner_inner.substring(3), field:key+'.'+key_inner + '.' + key_inner_inner});
                            }
                        }
                    }
                }
            }
        }
      $scope.header_cols = header_cols_before.concat(header_cols_middle).concat(header_cols_after )
      $scope.table.data = $scope.results;
      $scope.table.columnDefs = $scope.header_cols;
    });
    $scope.saveRow = function(rowEntity) {
      var promise = serviceAjax.putTransaction(rowEntity);
      console.log(promise);
    };
  };
  loadTransactions();
})
.filter('mapCurStat', function() {
  var mapCurStatHash = {
    'E': 'Error',
    'N': 'No error',
    'W': 'Warning',
    'A': 'Acknowledged Error'
  };

  return function(input) {
    if (!input){
      return '';
    } else {
      return mapCurStatHash[input];
    }
  };
});

Answer 1

发现它！

    $scope.saveRow = function(rowEntity,rowInfo,newValue,oldValue) {
      //$scope.gridApi.edit.raise.cancelCellEdit(rowEntity);
      var promise = serviceAjax.putTransaction(rowEntity).then(
        function(response){// success
          snackbar.add("success", "Modification saved." , 1000);
        },
        function(response){//error
          var error_reason = ""
          if (response.status == -1)
            {
              error_reason = "Connexion to server lost.";
            }
          else if (response.status == 403)
            {
              error_reason = "You are no more connected.";
            }
          else
            {
              error_reason = response.statusText + " - " + response.data.action;
            }
          console.log(response)
          $scope.gridApi.edit.raise.cancelCellEdit(rowEntity, rowInfo, newValue, oldValue);
          var message = "Modification of field <emph>" + rowInfo['field'] + "</emph> to value \"" + newValue +
            "\" has failed. Reverted to \"" + oldValue + "\" <br /> Reason : " + error_reason + " <br /> Impacted line : " + JSON.stringify(rowEntity)
          snackbar.add("danger", message , 10000);
          console.log(rowEntity)
        }
      );

    };
    $scope.cancelRow = function(rowEntity,rowInfo, newValue, oldValue) {
      rowEntity[rowInfo['field']] = oldValue;
      console.log(rowEntity[rowInfo['field']])
    };

AngularJS ui-grid - 编辑模式下的错误管理

1 个答案: