如何在angular-ui-grid中根据特定值为行着色？

Question

如何在angular-ui-grid中根据特定值为行着色？

javascripthtmlcssangularjsangular-ui-grid

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)中实现同样的功能？

非常感谢！

- tebanep

5个回答

14

请注意，背景颜色会被单元格背景覆盖。尝试自己找到解决方法吧 :-)

根据之前的回答，如果您想在行级别上覆盖背景颜色，可以使用以下代码：

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

- Gabriel Dinant

9

您可以直接使用特定的CSS类。

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

在行模板div上添加ng-class，并使用'invalidated'字段或调用函数（示例在plnkr中）：

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

这里是plunkrhttp://plnkr.co/edit/syuRZorj0nGq3B9p3U1h?p=preview

希望这会有所帮助。

- Patrik Bego

1

添加 !important 对我起了作用，否则 class 将不会被覆盖。 - faizanjehangir

3

请尝试这个：
在这里查看代码 http://plnkr.co/edit/WiIo7Dddxh52uloTtWTW?p=info.
我已经涵盖了许多场景下的单元格颜色，比如：

负值单元格将显示为红色
脏单元格将是黄色的。
可编辑单元格将是白色的
不可编辑单元格将是灰色的
总值单元格将是深灰色的

尝试一下吧。也许您可以从中学到一些知识/想法。

- Naushad Moidin

如果“MY_CONSTANTS”中用于比较以更改单元格颜色的值是在$ http调用之后接收到的，会怎样呢？也就是说，您在字段中键入某个值，然后进行编辑后，它会触发$ http调用，然后您使用从$ http返回的数据创建自己的“MY_CONSTANTS”，然后将同一单元格中的值与“MY_CONSTANTS”中的值进行比较，并根据验证更改颜色。 - Rajush

@Rajush 在编辑时，您可能需要将行实体信息存储在闭包中。一旦您的 $http 请求返回相同的值，同一闭包就可以访问您最后编辑的行实体信息。然后，您只需要使用 'gridApi.core.notifyDataChange' API 将事件发布以通知框架进行更改。注意：$http 调用应该在存储实体信息的同一闭包内部。 - Naushad Moidin

实际上，我能够使用cellTemplate函数或者rowTemplate函数来完成它，而不需要进行任何“gridApi.core.notifyDataChange”API调用。 - Rajush

太好了！如果您能创建一个 Plunker 并分享，那将非常有帮助。谢谢。 - Naushad Moidin

修改行或单元格模板不应该是解决这类问题的第一选择，因为当您更新到较新版本的Angular时，它可能会破坏某些东西。 - ErikE

太棒了。感谢提供文档。 - RedBottleSanitizer

1

@Naushad KM 如果有人需要在 $http 调用后进行实时单元格验证。

这是它的工作原理：

在可编辑行中输入值。
失去焦点后，进行 $http 调用。
使用返回的数据验证输入值。
有效值将显示为绿色，无效值将显示为红色。

示例: Plunker

- Rajush

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- mainguy · Accepted Answer

新的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

请注意，我将类green的颜色改为red，因为这样更容易看到并且会产生最大的混乱:-)

更新：

这是对于行着色的解决方案。

请将您的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>';

这里是forked Plunker

请注意，背景颜色被单元格背景覆盖。请自行找到解决方法 :-)

很抱歉最初对您的问题存在误读。我在此答案中保留了cellClass部分，以防有人需要它。