21

我正在尝试根据新的 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 )中实现相同的任何猜测

非常感谢！

4

5 回答 5

35

新的 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 部分留在这个答案中，以防有人需要它。

于 2014-10-15T13:07:24.350 回答
16

请注意，背景颜色会被单元格背景覆盖。自己想办法解决这个问题:-)

根据前面的答案，如果你想在行级别覆盖背景颜色，你可以使用这个：

.ui-grid-row .ui-grid-cell {
   background-color: inherit !important;
}
于 2014-11-18T09:31:51.830 回答
9

您可以简单地使用特定的 css 类

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

并在具有“无效”字段的行模板 div 上添加 ng-class 或调用函数（示例在 plnkr 中）：

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

这是 plunkr http://plnkr.co/edit/syuRZorj0nGq3B9p3U1h?p=preview

希望有帮助。

于 2016-02-21T01:36:09.983 回答
3

请试试这个
see the code here http://plnkr.co/edit/WiIo7Dddxh52uloTtWTW?p=info。
我已经介绍了许多基于场景的单元格颜色，例如。

  1. 负值单元格将显示为红色
  2. 脏单元格将是黄色的。
  3. 可编辑单元格将为白色
  4. 不可编辑的单元格将是灰色的
  5. 总价值单元格将为深灰色

试试看。也许您可以从那里获取一些知识/想法。

于 2015-08-27T10:35:14.680 回答
1

@Naushad KM，如果有人在 $http 调用后必须进行实时单元验证。

这就是它正在做的事情：

  1. 在可编辑行中输入一个值。
  2. 在焦点松散（模糊）时，进行 $http 调用。
  3. 使用返回的数据验证输入值。
  4. 有效值为绿色，无效值为红色。

Example:笨蛋

于 2015-11-10T22:04:42.020 回答