使用rowTemplate将每个类添加到每行的第一列？

Question

正如标题所说，我正在尝试将一个类添加到每行的第一列（选择框所在的位置）。我在rowTemplate中使用gridOptions。

这是代码：

let rowTemplate = () => {
  return $timeout(function() {
    $scope.waiting = 'Done!';
    $interval.cancel(sec);
    $scope.wait = '';
    return '<div ng-if="grid.appScope.rowFormatter( row ) == \'lowImportance\' "  ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell green-importance" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }"  ui-grid-cell></div>' +
           '<div ng-if="grid.appScope.rowFormatter( row ) == \'medImportance\' "  ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell yellow-importance" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }"  ui-grid-cell></div>' +
           '<div ng-if="grid.appScope.rowFormatter( row ) == \'highImportance\' "  ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell red-importance" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }"  ui-grid-cell></div>' ;
  }, 100);
}

显然，问题是代码在每个单元格的迭代中运行。我没有创建一个简单着色的列（这是我想要做的）的原因是因为我需要将颜色放在选择框（或圆圈）的左侧。见附图......

^只想col[0]

这是我用来实现我所做的css。

  .green-importance {
    position: relative;
  }
  .green-importance::before {
    position:absolute;
    z-index:11;
    top:0;
    left:0;
    width:10px;
    height:100%;
    content:"";
    background-color:red;
  }

Answer 1

您可以使用ui-grid的cell class，而不是使用自定义行模板。在这里你有一个plunker：http://plnkr.co/edit/cVs1NRANRGN5MiYX3XCo?p=preview

    vm.gridOptions = {
    enableSorting: true,
    columnDefs: [
      { field: 'name', cellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) {
           return 'green-importance';
        }
      },
      { field: 'company'
      }
    ]
  };