Угловой уровень дерева UI-Grid с различными шаблонами

Question

Я новичок здесь, я работаю с Угловым UI-Grid, и у меня есть небольшая проблема. Сетка, которую я обрабатываю, имеет древовидную структуру, которая отлично работает. Но чтобы упростить отслеживание этой структуры для пользователя, я хочу реализовать разные цвета на уровне.

Я создал это Plunker с двумя примерами: во-первых, как вы должны видеть разные цвета на уровне, а во-вторых, как он себя ведет сегодня. Кто-нибудь сделал что-то подобное или у вас есть идея, как это исправить?

app.js:

var app = angular.module('app', ['ui.grid','ui.grid.treeView']); 

app.controller('MainCtrl', ['$scope', '$http','uiGridTreeViewConstants', function ($scope, $http, uiGridTreeViewConstants) { 

    $scope.myData = [ 
    {"ubi_id":321,"ubi_nom":"America","ubi_pad_id":null,"ubi_tip_id":1,"$$treeLevel":0}, 
    {"ubi_id":322,"ubi_nom":"Sudamerica","ubi_pad_id":321,"ubi_tip_id":2,"$$treeLevel":1}, 
    ... 
    ]; 

    var rowtpl = ''; 
    rowtpl += '<div ng-class="{\'nivelGrilla-{{row.entity.$$treeLevel}}\': row.entity.$$treeLevel != \'undefined\' }">'; 
    rowtpl += '<div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name"'; 
    rowtpl += 'class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }" ui-grid-cell>'; 
    rowtpl += '</div></div>'; 

    $scope.gridOptions = { 
    data:'myData', 
    rowTemplate:rowtpl, 
    }; 

}]); 

CSS:

.nivelGrilla-0{ 
    background-color: #254158; 
    color: white; 
} 

.nivelGrilla-1{ 
    background-color: #3F6F96; 
    color: white; 
} 

HTML:

<div id="grid1" ui-grid="gridOptions" ui-grid-tree-view class="grid"></div> 

Answer 1

Я нашел решение, то DIV, который содержит всю строку, делает вызов функция, которая возвращает имя класса в соответствии с уровнем строки.

Here's a plnkr with my solution

ЯШ:

var rowtpl = ''; 
     rowtpl += '<div class=\"{{grid.appScope.rowLevel(row)}}\">'; 
     rowtpl += '<div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name"'; 
     rowtpl += 'class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }" ui-grid-cell>'; 
     rowtpl += '</div>'; 
     rowtpl += '</div>'; 

    $scope.gridOptions2 = { 
    data:'myData', 
    rowTemplate:rowtpl, 
    }; 

CSS:

.ui-grid-row .ui-grid-cell { 
    background-color: inherit !important; 
    color: inherit !important; 
} 

.ui-grid-row .ui-grid-cell.ui-grid-cell { 
    background-color: #f0f0ee; 
    border-bottom: solid 1px #d4d4d4; 
} 

.rowLevel-0{ 
    background-color: #254158; 
    color: white; 
} 

.rowLevel-1{ 
    background-color: #3F6F96; 
    color: white; 
} 
.rowLevel-2{ 
    background-color: #5289B6; 
} 

Answer 2

Вы можете указать 'cellClass' в пределах сетке в 'columnDefs' и переключить строки в соответствии с уровнем дерева. Например:

$scope.gridOptions = { 
data:'myData', 
columnDefs: [ 
    { field: 'Id', name: 'Ubi Id'}, 
    { field: 'Country', name: 'Ubi Nom'}, 
    cellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) { 
    switch(row.treeLevel) 
    { 
     case 0: 
     return 'red'; 

     case 1: 
     return 'blue'; 

     case 2: 
     return 'green'; 

     default: 
     break; 
    } 
    } 
] 
};