ui-grid rowTemplate：如何根据列数据动态改变行颜色

Question

我有一个服务器数据嵌入了确定行颜色的值。

var ngBody = angular.module ('BodySpace', [
'ui.grid', 'ngSanitize', 'ngResource'
, 'ui.grid.selection', 'ui.bootstrap'
, 'ui.grid.resizeColumns'
]);

ngBody.controller('ngController', function($scope, $http, $filter, uiGridConstants) {
angular.element(document).ready(function () {
    initScope( $scope, uiGridConstants, $filter);
    $scope.Get2Data();
} );            
initScope( $scope, uiGridConstants, $filter);

$scope.Get2Data = function() {

        $scope.uiGrid306.data = serverdata;
  :
  :
  :
}
})

从服务器请求的数据有一个控制行颜色的列。我应该在我的行模板中写什么来引用我的数据列，该数据列确定要呈现的每一行的颜色？

Answer 1

在启动您的 ui-grid 时，您将应用一个行模板，在该模板中执行引用决定行颜色的列数据的代码 - 在本例中，它是 _ab_x_style 存储我的样式名称 class.

function initGrid( $scope, uiGridConstants, $filter){
    $scope.uiGrid306 = {
        rowTemplate: 'rowTemp.html'
        , columnDefs: [{
            field: 'FIELD1', name: 'my field name', width: "7%"
        , filter: { type: uiGridConstants.filter.SELECT, selectOptions: Opts } 
        }, { ...
        }, { ...
        }]
    }
 }

您将 rowTemp.html 放在您的 .html 页面所在的位置。在你的 rowTemp.html 中，你有

 <div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid" ui-grid-one-bind-id-grid="rowRenderIndex + '-' + col.uid + '-cell' " class="ui-grid-cell" ng-class="row.entity._ab_x_style" role="{{col.isRowHeader ? 'rowheader' : 'gridcell' }}" ui-grid-cell></div>

plunker

ui-grid rowTemplate：如何根据列数据动态改变行颜色

ui-grid rowTemplate: how to dynamically change row color based on column data

celltemplate

angular-ui-grid

ui-grid