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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

非常感谢！

回答：

新的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';
        }
      }
    ]
  };

看看他的柱塞

请注意，我为类的颜色 中 ，因为它是更好地看到和搅拌最大的困惑:-)

这是行着色的解决方案。

像这样编写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>';

这是分叉的柱塞

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

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

以上是 如何在angular-ui-grid中为特定值上的行着色？ 的全部内容， 来源链接： utcz.com/qa/419518.html

回到顶部