Question

我尝试检测单元格编辑，但以下代码未获取事件。我使用“name”：“angular-ui-grid”，“version”：“3.0.0-rc.14”，我是否必须定义一些配置来获取事件？

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

Answer 1

我更新了默认行模板，如下所示

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>',

然后在onRegisterApi

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

该行现在将获得类＆＃34;行更改＆＃34;如果该实体具有状态＆＃34;已更改＆＃34;。

如果单元格更改回其原始值，您可能需要添加一些额外的检查，但这是另一个问题。

Answer 2

您可以使用beginCellEdit事件：

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

Answer 3

您是对编辑的单元格还是绑定数据感兴趣？

我为绑定的dataSource添加了一个深度监视，当数组中的任何项发生更改时，它将触发。

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

$ watch返回取消绑定手表的方法，停止寻找更改。因此，只需执行返回的方法即可结束监视。

Answer 4

对于＆ng.93; ngGridEventEndCellEdit＆＃39;特定事件，我认为它已被弃用。试试这个

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

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

其他选项是：

您可以使用行模板添加css类来为行着色。然后在编辑单元格时添加此类。

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>';
    }

并将css类定义为：

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

并检测细胞编辑：

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

        })

注意：

确保CSS类具有更高的特异性来更改行背景颜色。

但我认为需要网格刷新以应用此css更改。

检测角度ui网格中的单元格编辑

4 个答案: