是否有可能导致UI-Grid的afterCellEdit人工触发?

时间:2017-03-07 16:50:04

标签: javascript callback angular-ui-grid

我在我继承的应用中使用了此代码:

onRegisterApi: function(gridApi) {
    $scope.gridApi = gridApi;
    $scope.gridApi.edit.on.afterCellEdit($scope,
        function(rowEntity, colDef, newValue, oldValue) {
    }
}

我更新了将数据绑定到UI网格的gridOptions对象,因此我希望为呈现更新数据的单元格触发afterCellEdit回调。

这可能吗?

1 个答案:

答案 0 :(得分:1)

在回答你的问题时,这就是当你在网格之外更新任何网格数据时,你会如何导致UI-Grid的afterCellEdit人工触发......

var app = angular.module('app', ['ui.grid', 'ui.grid.edit', 'ui.grid.cellNav']);
app.controller('MainCtrl', ['$scope', '$timeout', function($scope, $timeout) {
  $scope.gridData = [{"FirstName": "Matt", "LastName": "W", "Job": "Stack Overflow User"},
                     {"FirstName": "Tim", "LastName": "Harker", "Job": "Stack Overflow User"}];
  $scope.$watch('gridData', function(newValues, oldValues) {
    for (var i = 0; i < newValues.length; i++) {
      if (!angular.equals(newValues[i], oldValues[i])) {
        for (var property in oldValues[i]) {
          if (oldValues[i].hasOwnProperty(property)) {
            if (oldValues[i][property] != newValues[i][property]) {
              $scope.gridApi.edit.raise.afterCellEdit(newValues[i], null, newValues[i][property], $scope.gridOptions.data[i][property]);
            }
          }
        }
      }
    }
    $timeout(function() {
      $scope.gridOptions.data = angular.copy($scope.gridData);
    });
  }, true);
  $scope.callbackData = {};
  $scope.gridOptions = {
    enableCellEditOnFocus: true,
    onRegisterApi: function(gridApi) {
      $scope.gridApi = gridApi;
      $scope.gridApi.edit.on.afterCellEdit($scope,
        function(rowEntity, colDef, newValue, oldValue) {
          $scope.callbackData.oldValue = oldValue;
          $scope.callbackData.newValue = newValue;
        });
    },
    columnDefs: [{name: 'FirstName'}, {name: 'LastName'}, {name: 'Job'}]
  };
}]);
button {
  margin-bottom: 10px;
}

div[ui-grid] {
  height: 115px;
  margin-bottom: 10px;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.2/ui-grid.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.2/ui-grid.min.css" />
<div ng-app="app" ng-controller="MainCtrl">
  <button ng-click="gridData[0].LastName='Williams'">Guess Last Name</button>
  <div ui-grid="gridOptions" ui-grid-edit ui-grid-cellNav></div>
  <div>{{callbackData}}</div>
</div>

如果您有任何其他问题,请与我们联系。