如何将样式应用于Angular ui-grid中的排序列？

Question

我有一个狭窄的列的ui网格，当我对这些列应用排序时，不显示指示排序及其方向的小箭头。所以我希望能够根据列排序状态（asc，desc和none）对列单元格或列标题进行样式设置。这可能吗？

这里显示三个排序的列的示例屏幕截图（也注意到菜单图标是种坏，但这是另一个问题）：

Answer 1

您可以使用“headerCellClass”选项，在你的“columnDefs ”。

文档是在这里：http://ui-grid.info/docs/#/tutorial/115_headerCellClass

在你的情况下，它会像：

$scope.gridOptions = { 
    enableSorting: true, 
    columnDefs: [ 
     { 
     field: 'company', 
     headerCellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) { 
      if (col.sort.direction) { 
      return 'red'; 
      } 
     } 
     } 
    ], 
    onRegisterApi: function(gridApi) { 
     $scope.gridApi = gridApi; 
     $scope.gridApi.core.on.sortChanged($scope, function(grid, sort) { 
     $scope.gridApi.core.notifyDataChange(uiGridConstants.dataChange.COLUMN); 
     }) 
    } 
    }; 

工作Plunker是在这里：http://plnkr.co/edit/ifQlqkGAEdeELbMqozVE?p=preview