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

Question

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

这是一个显示三个排序列的示例屏幕截图（另请注意菜单图标有点破碎，但这是另一个问题）：

Answer 1

您可以使用＆＃39; headerCellClass＆＃39;您的＆＃39; columnDefs＆＃39;。

中的选项

文档在这里：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 );
      })
    }
  };

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