Как раскрасить строку по определенному значению в 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)

спасибо лот!

18
angular-ui-grid angularjs css html javascript

5 ответов

новая ui-grid имеет специальное свойство для 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

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

обновление:

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

напишите свой 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 в этом ответе, если кому-то это может понадобиться.

30

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

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

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

Вы можете просто использовать определенный класс 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

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

7

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

  1. отрицательные значения ячейки будут отображаться красным цветом
  2. грязные клетки будут желтыми.
  3. редактируемые ячейки будут белыми
  4. не редактируемые ячейки будут серыми
  5. общее значение ячейки будут DARKGREYED

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

2

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

вот что он делает:

  1. введите значение в редактируемой строке.
  2. on focus loose (размытие), делает вызов $http.
  3. проверяет входное значение с возвращенными данными.
  4. допустимое значение будет зеленым, недопустимое будет красным.

Example: Plunker

1