UI 基于单元格值的网格行模板颜色

Question

我正在使用下面的 rowTemplate。我想在 Valid ==true 时应用 css class "ui-grid-invalid-upload-row"。不知何故，它不起作用。

<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-invalid-upload-row\': col.colDef["Value"]==true }" ui-grid-cell></div>

Answer 1

如果你想要颜色行

使用row.entity.yourfieldname

喜欢ng-class="{\'green\':true, \'blue\':row.entity.count==1 }"

一个工作的 plunker 是 here

如果您只想将 class 应用到 单元格 ，请改用 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';
        }
      }
    ]
  };

一个工作的 pluncker 是 here

如果对你有帮助，请告诉我。

Answer 2

我把col.colDef["Value"]==true改成了col.colDef[\'Value\']。双引号过早地终止了 ng-class 语句

<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-invalid-upload-row\': col.colDef[\'Value\'] }" ui-grid-cell></div>

编辑由于您想根据单元格值更改颜色，我认为您应该改为修改 cellTemplate。

Answer 3

我得到上面的工作，我使用下面根据 row.entity.[FieldName] 更改颜色。在这里发帖希望有人能从中得到帮助，

function rowTemplate() {
        return $timeout(function () {
            return '<div ng-class="{ \'ui-grid-invalid-upload-row\': grid.appScope.rowFormatter( row ) }">' +
                        ' <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>';
        });
    }

$scope.rowFormatter = function (row) {
    return row.entity.Value === 'true';
};

UI 基于单元格值的网格行模板颜色

UI Grid RowTemplate color based on cell value

angularjs

angular-ui-grid

ui-grid