如何使用 angular-ui-grid 将类添加到网格列？答案

【问题标题】：How to add class to column of grid with angular-ui-grid?如何使用 angular-ui-grid 将类添加到网格列？
【发布时间】：2016-08-14 07:36:56
【问题描述】：

我正在使用 UI-GRID 并且必须将自定义 CSS 添加到网格的标题中，因此我正在尝试将类添加到列中。

$scope.columns = [
{
  name: 'status',
    displayName: 'STATUS',
    width: 200,
    pinnedLeft: true,
    **cellClass : "gridColumnStyle"**
},
{
  name: 'serial',
  displayName: 'SERIAL#',
  width: 200,
  cellClass : "gridColumnStyle"
}, 
{
  name: 'product_name',
  displayName: 'PRODUCT NAME',
  width: 200,
  cellClass : "gridColumnStyle"
}
];

但它不起作用。请告诉我如何添加具有一些自定义样式的类。

【问题讨论】：

标签： css angularjs user-interface

【解决方案1】：

尝试使用 headerCellClass 而不是 cellClass。像这样

  $scope.gridOptions = {
    enableSorting: true,
    columnDefs: [
      { field: 'name', headerCellClass: 'blue' },
      { field: 'company',
        headerCellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) {
          if (col.sort.direction === uiGridConstants.ASC) {
            return 'red';
          }
        }
  }]};

这里还有一个例子：http://ui-grid.info/docs/#/tutorial/115_headerCellClass 万一有人搬到这里来了：http://plnkr.co/edit/lmkJvXrxmGfzC342GXrO?p=preview

【讨论】：