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

Question

正如标题所说，我正在尝试将 class 添加到每一行的第一列（select 框所在的位置）。我在 gridOptions.

中使用 rowTemplate

这是代码：

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);
}

显然，问题是代码在单元格的每次迭代中运行。我没有创建一个列并简单地对其着色（这是我想要做的）的原因是因为我需要颜色位于 select 离子框（或圆圈）的左侧。见附图...

^ 只想要 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

您可以使用 cell class of ui-grid. Here you have a 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'
      }
    ]
  };

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

Adding a class to the first column of each row with rowTemplate?

angular-ui-grid