Angular UI-Grid-Baum-Ebene mit verschiedenen Vorlagen

Question

Ich bin neu hier, ich arbeite mit Angular UI-Grid, und ich habe ein kleines Problem. Das Raster, das ich behandle, hat eine Baumstruktur, die perfekt funktioniert. Um die Struktur für den Benutzer einfacher zu machen, möchte ich verschiedene Farben pro Ebene implementieren.

Ich habe diese Plunker mit zwei Beispielen erstellt, die erste ist, wie Sie die verschiedenen Farben pro Ebene sehen sollten, und die zweite ist, wie es sich heute verhält. Hat jemand so etwas gemacht oder haben Sie eine Idee, wie Sie das beheben können?

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

ich eine Lösung gefunden, die div, dass die gesamte Zeile enthält, einen Anruf tätigt, um eine Funktion, die den Namen der Klasse entsprechend der Zeilenebene zurückgibt.

Here's a plnkr with my solution

js:

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

Sie können eine 'cellClass' angeben innerhalb Ihres Grids 'columnDefs' und wechseln die Zeilen entsprechend der Baumebene. Zum Beispiel:

$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; 
    } 
    } 
] 
};