Как раскрасить строку по определенному значению в angular -ui-grid?

Я пытаюсь покрасить строку в зависимости от ее значения в новом angular -ui-grid 3.0 rc12, но я не смог. Следующий код, используемый для работы в предыдущей версии (ngGrid):

$scope.gridOptions =
    data: 'data.sites'
    tabIndex: -1
    enableSorting: true
    noTabInterference: true
    enableColumnResizing: true
    enableCellSelection: true
    columnDefs: [
      {field: 'sv_name', displayName: 'Nombre'}
      {field: 'sv_code', displayName: 'Placa'}
      {field: 'count', displayName: 'Cuenta'}
    ]
    rowTemplate: """<div ng-class="{green: true, blue: row.getProperty('count') === 1}"
                         ng-repeat="col in colContainer.renderedColumns track by col.colDef.name"
                         class="ui-grid-cell"
                         ui-grid-cell></div>"""

и соответствующий css:

.grid {
  width: 100%;
  height: 250px;
}

.green {
  background-color: #2dff07;
  color: #006400;
}

.blue {
  background-color: #1fe0f0;
  color: #153ff0;
}

Проблема заключается в том, что выражение:

row.getProperty('count') === 1

Не работает больше, как в ngGrid. Любые догадки о том, как добиться того же результата в angular -ui-grid (ui-grid.info)

Спасибо большое!

Ответы

Ответ 1

Новая ui-сетка имеет специальное свойство для cellClass:

  $scope.gridOptions = {
    enableSorting: true,
    data:'myData',
    columnDefs: [
      { field: 'sv_name', displayName: 'Nombre'},
      {field: 'sv_code', displayName: 'Placa'},
      { field: 'count', displayName: 'Cuenta',
        cellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) {
          if (grid.getCellValue(row,col) == 1) {
            return 'blue';
          }
          return 'green';
        }
      }
    ]
  };

Посмотрите на его Plunker

Заметьте, что я сделал цвет для класса зеленый в красном, потому что лучше видеть и перемешивать максимальную путаницу: -)

Update:

Вот решение для раскраски строк.

Назовите свой rowTemplate следующим образом:

  var rowtpl='<div ng-class="{\'green\':true, \'blue\':row.entity.count==1 }"><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>';

Вот раздвоенный Plunker

Обратите внимание, что фоновый цвет перезаписывается фоновую ячейку. Найдите способ самостоятельно: -)

Извините за первоначальное неправильное использование вашего вопроса. Я оставляю элемент cellClass в этом ответе, если кому-то это может понадобиться.

Ответ 2

Обратите внимание, что фоновый цвет перезаписывается фоновую ячейку. Найдите способ самостоятельно: -)

В соответствии с предыдущим ответом, если вы хотите переопределить фоновый цвет на уровне строк, вы можете использовать это:

.ui-grid-row .ui-grid-cell {
   background-color: inherit !important;
}

Ответ 3

Вы можете просто использовать конкретный класс css

.invalidated {
background-color: #f2dede !important;
}

и добавьте ng-класс в div шаблона строки с полем "invalidated" или вызовите функцию (пример находится в plnkr):

<div ng-class="{invalidated: row.entity.invalidated}"

Вот plunkr http://plnkr.co/edit/syuRZorj0nGq3B9p3U1h?p=preview

Надеюсь, что это поможет.

Ответ 4

Пожалуйста, попробуйте это
see the code here http://plnkr.co/edit/WiIo7Dddxh52uloTtWTW?p=info.
Я рассмотрел многие цвета, основанные на сценариях, например.

Отрицательные значения ячейки будут отображаться в RED
Грязные ячейки будут ЖЕЛТЫЕ.
Редактируемые ячейки будут WHITE
Недействующие ячейки будут GREY
Ячейки общего значения будут DARKGREYED

Попробуй. Может быть, вы можете получить от меня некоторые знания/идеи.

Ответ 5

@Naushad KM, и если кто-то должен выполнить проверку ячейки в реальном времени после вызова $http.

Это то, что он делает:

Введите значение в редактируемую строку.
В фокусе (размытие), делает вызов $http.
Проверяет входное значение с возвращенными данными.
Допустимое значение будет GREEN, недопустимым будет RED.

Example: Plunker