Angular UI-具有不同模板的网格树级别

Question

我是新来的，我正在使用 Angular 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 包含整行，根据行级别调用 returns class 名称的函数。

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

您可以在网格的 'columnDefs' 中指定 'cellClass' 并根据树级别切换行。例如：

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

Angular UI-具有不同模板的网格树级别

Angular UI-Grid tree level with different templates

treeview

angular-ui-grid