如何在颜色特定值排角的UI网？ [英] How to color row on specific value in angular-ui-grid?

问题描述

我试图颜色取决于它的价值在新的角度-UI-电网3.0 RC12行，但我一直没能来。用下面的code在previous版本（ngGrid）工作：

I'm trying to color a row depending on it's value in the new angular-ui-grid 3.0 rc12 but I haven't been able to. The following code used to work in the previous version (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;
}

这里的问题是，该前pression：

The problem here is that the expression:

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

，因为它在ngGrid确实不工作了。如何才达到相同的角UI格的任何猜测（ ui-grid.info ）

非常感谢！

推荐答案

新的UI网先后为cellClass一个特殊的属性：

The new ui-grid has a special property for the 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

请注意，我所作的颜色类的绿色在红色，因为它是更好地看到和搅拌最大的困惑： - ）

Note that I made the color for class green in red because it's better to see and to stir maximal confusion:-)

更新：

下面是一行着色解决方案。

Here is the solution for row coloring.

撰写您rowTemplate是这样的：

Write your rowTemplate like this:

  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

需要注意的是背景色是由单元格背景覆盖。查找自己解决的办法： - ）

Note that background-color is overwritten by cell backgrounds. Find a way around this by yourself:-)

对不起，你的问题的初始误读。我离开这个答案的情况下，任何人cellClass部分可能需要它。

Sorry for the initial misread of your question. I leave the cellClass part in this answer in case anyone may need it.

这篇关于如何在颜色特定值排角的UI网？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！