1

В UI Grid пытаюсь сделать выделение отредактированной ячейки синим цветом. Для этого в afterCellEdit обрабатываю изменение и вношу соответствующие пометки в сущность, а в cellClass проверяю эти пометки в сущности и возвращаю соответствующий класс. Вызов $scope.$apply (который показан в документации) есть.

Следующий пример упрощённый: в нём исключена проверка столбца. В реальности она у меня есть и подсвечивается только одна нужная ячейка в строке. Но проблема видна и в этом варианте:

  1. Выбрать ячейку в столбце Company (но не в нижней строке).
  2. Изменить значение.
  3. Нажать Enter.
    Значение изменится, в колонке Edited отобразится true, курсор переместится в следующую строку. Но текст останется чёрным.
  4. Нажать Enter.
    Текст в отредактированной на шага 2 ячейке станет синим.

Как сделать, чтобы текст синел на шаге 3, а не 4?

http://plnkr.co/edit/SEEf4DPhA3CB1mx7R4I8?p=preview

var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid', 'ui.grid.selection', 'ui.grid.edit', 'ui.grid.cellNav']);

app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
  $scope.gridOptions = {
    enableCellEditOnFocus: true,
    
    columnDefs: [{
      field: 'edited',
      enableCellEdit: false
    },{
      field: 'company',
      cellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) {
        return row.entity.edited ? 'blue' : '';
      }
    }],
    
    onRegisterApi: function (gridApi) {
      gridApi.edit.on.afterCellEdit($scope, function (rowEntity, colDef, newValue, oldValue) {
        if (newValue !== oldValue) {
          rowEntity.edited = true;
          $scope.$apply();
        }
      });
    }
  };

  $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
    .success(function(data) {
      $scope.gridOptions.data = data;
    });
}]);
.grid {
  width: 500px;
  height: 200px;
}

.blue {
  color: blue;
}
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<link rel="stylesheet" href="main.css" type="text/css">

<div ng-app="app" ng-controller="MainCtrl">
  <div id="grid1" ui-grid="gridOptions" ui-grid-selection ui-grid-edit ui-grid-cellNav class="grid"></div>

PS: Этот вопрос на английском.

8
  • Вызов $scope.$apply (который показан в документации) есть. - добавь ссылку на это. Пока видно только, что это событие выполняется после cssClass - поэтому и не применяется ничего, так как во время выполнения cssClass - флаг еще не выставлен
    – Grundy
    29 авг 2016 в 10:39
  • @Grundy, да, событие вызывается позже, а apply не вызывает повторное выяснение классов. Я это уже выяснил, ожидал, что из текста вопроса ясно :) По поводу документации и apply - код тут: ui-grid.info/docs/#/tutorial/201_editable. Не думаю, что это важно для вопроса.
    – Qwertiy
    29 авг 2016 в 10:48
  • а вот это видел? :-) github.com/angular-ui/ui-grid/issues/3449
    – Grundy
    29 авг 2016 в 10:50
  • и советуют вот: notifydatachange
    – Grundy
    29 авг 2016 в 10:52
  • @Grundy, не пойму, как его правильно вызвать...
    – Qwertiy
    29 авг 2016 в 10:58

1 ответ 1

1

Как указано в соответствующем тикете на гитхабе - значение cssClass не отслеживается, поэтому на него никак не влияет вызов $scope.apply()

Вместо этого рекомендуют указать гриду, что была изменена колонка с помощью метода notifyDataChange

В итоге будет вот так:

var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid', 'ui.grid.selection', 'ui.grid.edit', 'ui.grid.cellNav']);

app.controller('MainCtrl', ['$scope', '$http', 'uiGridConstants',
  function($scope, $http, uiGridConstants) {
    $scope.gridOptions = {
      enableCellEditOnFocus: true,

      columnDefs: [{
        field: 'edited',
        enableCellEdit: false
      }, {
        field: 'company',
        cellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) {
          return row.entity.edited ? 'blue' : '';
        }
      }],

      onRegisterApi: function(gridApi) {
        gridApi.edit.on.afterCellEdit($scope, function(rowEntity, colDef, newValue, oldValue) {
          if (newValue !== oldValue) {
            rowEntity.edited = true;
            gridApi.core.notifyDataChange(uiGridConstants.dataChange.COLUMN);
          }
        });
      }
    };

    $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
      .success(function(data) {
        $scope.gridOptions.data = data;
      });
  }
]);
.grid {
  width: 500px;
  height: 200px;
}
.blue {
  color: blue;
}
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<link rel="stylesheet" href="main.css" type="text/css">

<div ng-app="app" ng-controller="MainCtrl">
  <div id="grid1" ui-grid="gridOptions" ui-grid-selection ui-grid-edit ui-grid-cellNav class="grid"></div>

4
  • "значение cssClass не отслеживается" - там вообще cellClass не вызывается. На английском тоже ответишь, или мне самому?
    – Qwertiy
    29 авг 2016 в 11:02
  • Кстати, я uiGridConstants.dataChange.EDIT использовал.
    – Qwertiy
    29 авг 2016 в 11:04
  • можешь сам, значение cssClass не отслеживается - я имел ввиду что на них watch Нет, поэтому и не вызывается при изменении. И как я понял что-то с EDIT у них там не получалось и в примере было COLUMN :)
    – Grundy
    29 авг 2016 в 11:05
  • У них не получилось gridApi.core.notifyDataChange(gridApi.grid, uiGridConstants.dataChange.EDIT); из-за лишнего первого параметра - вместо строки в качестве действия приходил сам грид :)
    – Qwertiy
    29 авг 2016 в 11:09

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.