ui-grid：基于列数据动态更改行颜色-使用行模板文件

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, $resource);
    $scope.Get2Data();
} );            
initScope( $scope, uiGridConstants, $filter, $resource);

$scope.Get2Data = function() {

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

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

Answer 1

启动ui-grid时，您将应用行模板，在其中执行引用决定行颜色的列数据的代码-在此示例中，此_ab_x_style存储了我的样式类的名称。

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>