5

我绞尽脑汁，但无法弄清楚如何检测 ng-grid 中的单元格数据变化。下面的代码片段使用了 ng-change，它正确调用了 save()，但它不是我想要的触发器，因为它会被任何键控条目调用。我需要知道单元格的编辑何时完成。

任何帮助，将不胜感激。

angular.module('controllers', ['ngGrid']).
controller('ContactsListCtrl', ['$scope', 'Contacts', function ($scope, Contacts) {
    var editableCellTemplate = '<input type="text" ng-class="\'colt\' + col.index" ng-input="COL_FIELD" ng-model="COL_FIELD" ng-change="save()"/>';

    Contacts.get(function(data) {
        $scope.contacts = data;

    });
    $scope.gridOptions = {
        data: 'contacts',
        enableCellSelection: true,
        enableRowSelection: false,
        enableCellEdit: true,
        showSelectionCheckbox: true,
        columnDefs: [
            {field: 'lastName', displayName: 'Last Name', enableCellEdit: true, editableCellTemplate: editableCellTemplate},
            {field: 'firstName', displayName: 'First Name', enableCellEdit: true, editableCellTemplate: editableCellTemplate},
            {field: 'email', displayName: 'EMail Address', enableCellEdit: true, editableCellTemplate: editableCellTemplate},
            {field: 'phone', displayName: 'Phone', enableCellEdit: true, editableCellTemplate: editableCellTemplate}
        ]
    };
    $scope.save = function() {
        $scope.contact = this.row.entity;
        Contacts.save($scope.contact);
    }
}]);
4

6 回答 6

5

这应该可以解决问题，并在编辑单元格时为您提供完整的编辑行。然后您可以保存/更新

$scope.$on('ngGridEventEndCellEdit', function(event) {
    $scope.contact = event.targetScope.row.entity;
    Contacts.save($scope.contact);
    // console.log($scope.contact );
});
于 2013-12-13T17:27:40.400 回答
5

如果您使用的是 UI Grid 3.0 或 4.x，您应该等待：uiGridEventEndCellEdit

$scope.$on('uiGridEventEndCellEdit', function (data) {
    console.log(data.targetScope.row.entity);
});
于 2015-04-21T00:58:25.440 回答
4

您应该能够监听 ngGridEventEndCellEdit 事件：

$scope.$on('ngGridEventEndCellEdit', function(data) {
  console.log(data);
});

这在以下位置没有详细描述：https ://github.com/angular-ui/ng-grid/wiki/Grid-Events 。

不幸的是，我还没有弄清楚这个事件如何告诉我我们已经完成了编辑的行/单元格，以便我可以保存它。但这也许是一个开始。

或者，stackoverflow 上的这个问题似乎有一个很好的答案，其中涉及 ng-blur 指令：AngularJS and ng-grid - auto save data to the server after a cell was changed

于 2013-12-05T07:49:14.797 回答
1

我希望这会对某人有所帮助。我也需要 ngGridEventEndCellEdit 事件中的网格名称。

在函数内部使用 jquery：

$scope.$on('ngGridEventEndCellEdit', function (data) {
var gridName = $('.' + data.targetScope.gridId).attr('ng-grid');
});
于 2015-01-05T16:40:04.247 回答
0

You could create a blur directive and call the save function when the input loses focus.

app.directive('ngBlur', ['$parse', function($parse) {
  return function(scope, element, attr) {
    var fn = $parse(attr['ngBlur']);
    element.bind('blur', function(event) {
      scope.$apply(function() {
        fn(scope, {$event:event});
      });
    });
  }
}]);
于 2013-08-14T19:01:56.157 回答
0

对于 ui-grid 3.0.6，我确实使用了afterCellEdit事件。

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

      gridApi.edit.on.afterCellEdit($scope,function(rowEntity, colDef,newValue,oldValue){

        if(newValue != oldValue){
          // Do something.......
          // colDef.field has the name of the column that you are editing
        }

      });

}
于 2015-10-07T19:25:02.473 回答