ui-grid rowTemplate: как динамически изменять цвет строки на основе данных столбца - PullRequest
Новая
       33

ui-grid rowTemplate: как динамически изменять цвет строки на основе данных столбца

0 голосов
/ 07 марта 2020

У меня есть данные сервера со значениями, которые определяют цвет строки. 

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;
  :
  :
  :
}
})

Запрошенные данные с сервера имеют столбец, который контролирует цвет строки. Что я должен написать в своем шаблоне строки для ссылки на столбец данных, который определяет цвет каждой строки для визуализации?

1 Ответ

0 голосов
/ 07 марта 2020

При запуске вашей пользовательской сетки вы примените шаблон строки, в котором вы выполните код, ссылающийся на данные столбца, которые определяют цвет строки - здесь в этом примере это _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>

plunker

rowTemplate

...