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

Posted 2023-03-05

【中文标题】如何在angular-ui-grid中的特定值上为行着色？

【英文标题】：How to color row on specific value in angular-ui-grid?

【发布时间】：2014-12-09 08:33:24

【问题描述】：

我正在尝试根据新 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-grid-row .ui-grid-cell 
   background-color: inherit !important;

【参考方案2】：

您可以简单地使用特定的 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

希望对您有所帮助。

【讨论】：

添加!important 对我有用，否则class 将不会被覆盖..

【参考方案3】：

@Naushad KM 以及是否有人必须在 $http 调用后进行实时单元格验证。

这就是它正在做的事情：

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

Example:Plunker

【参考方案4】：

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

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

试一试。也许你可以从那里获得一些知识/想法。

【讨论】：

如果在 $http 调用后收到“MY_CONSTANTS”中的值（用于比较更改单元格颜色的值）怎么办？意思是，您在字段中输入一些值，然后在编辑后，它会触发 $http 调用，然后您使用 $http 返回的数据创建“MY_CONSTANTS”，然后将同一单元格中的值与“MY_CONSTANTS”中的值，并根据验证更改颜色。

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

实际上，我可以使用 cellTemplate 函数甚至 rowTemplate 来实现，而无需调用任何 'gridApi.core.notifyDataChange' API。

太棒了！如果您能够创建一个 plunker 并分享，那将会很有帮助。谢谢。

修改行或单元格模板不应该是此类问题的第一个解决方案，因为当您更新到更高的角度版本时，它可能会破坏事情。

【参考方案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

请注意，我将 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 部分留在这个答案中，以防有人需要它。

【讨论】：

呃，我刚刚注意到你要的是整行。暂时忽略我愚蠢的回答。我会看看我能找到什么并给你一个更新。

非常感谢！它完美地工作。你真的让我免于很多头痛:)

@mainguy，在上面的示例中返回“蓝色”之前，您如何检查当前单元格的值以及同一行中另一个单元格的值？在返回“blue”之前，我需要检查同一行中的“grid.getCellValue(row,col) == 1”和“sv_name”是否等于“test”。

@SamDevx：使用：if (grid.getCellValue(row,col) == 1 && row.entity.sv_name == "Test")。使用 row.entity 您可以访问行对象的每个成员。这是plunker：plnkr.co/edit/0JbjXIp8ipKV310g1k7D?p=preview

@SamDevx：这也是行着色的模板：var rowtpl='';这是 plunker：plnkr.co/edit/e7lxlRKDt4GCj2twUguH?p=preview 感谢 Gabriel 修复 CSS！