detect cell edit in angular ui-grid

问题

I try to detect cell edit but the following code does not get event. I use "name": "angular-ui-grid", "version": "3.0.0-rc.14", Do I have to define some configuration to get events?

$scope.$on('ngGridEventEndCellEdit', function(data) {

回答1:

I updated the default row template to look like below

rowTemplate: '<div ng-class="{\'row-changed\':row.entity.State==\'changed\'}" ng-click="grid.appScope.fnOne(row)" ng-repeat="col in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell" ui-grid-cell></div>',

And then in onRegisterApi

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

The row will now get the class "row-changed" if the entity has the State "changed".

You might want to add some extra checks if the cell gets changed back to its original value, but that's another issue.

回答2:

You can use the beginCellEdit event:

gridApi.edit.on.beginCellEdit($scope, function(rowEntity, colDef) { ... });

回答3:

Are you interested in the cell being edited or the bound data?

I added a deep watch to the bound dataSource which will fire when any item in array changes.

unbindWatch = $scope.$watch("array", function (newValue, oldValue) {
    if (newValue != oldValue) {
        vm.isDirty = true;
     }
 }, true);

$watch returns a method to unbind the watch, stop looking for changes. So just execute the returned method to end the watch.

回答4:

For 'ngGridEventEndCellEdit' specific event, I think it is deprecated. Try this instead

$scope.$on('uiGridEventEndCellEdit', function(data) {

https://github.com/angular-ui/ui-grid/wiki/Grid-Events

Other option is:

You can use the row template which adds a css class for coloring the row. And then add this class when cell is edited.

function rowTemplate() {
        return '<div ng-class="{\'ui-grid-row-bg-red\':row.entity.IsEdited}" >' +
                  '<div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader}"  ui-grid-cell></div>' +
               '</div>';
    }

and define css class as:

  .gridStyle .ui-grid-row-bg-red .ui-grid-cell {
       background-color: #872f2f;
       color: #fff;
  }

And to detect cell edit:

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

        })

Note:

Be sure that CSS class has higher specificity to change row background color.

But I have figured that it will need the grid to refresh to apply this css changes.

来源：https://stackoverflow.com/questions/28920028/detect-cell-edit-in-angular-ui-grid

标签

angular-ui-grid