angular-ui-grid - 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 存储我的样式类的名称。

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>

笨蛋