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，调用一个函数，该函数根据行级别返回类的名称。

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-Grid树级别

2 个答案: