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

【问题标题】：How do I apply styling to sorted columns in Angular ui-grid?如何将样式应用于 Angular ui-grid 中的排序列？
【发布时间】：2015-06-09 13:10:34
【问题描述】：

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

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

【问题讨论】：

标签： angularjs sorting styling angular-ui-grid

【解决方案1】：

您可以在“columnDefs”中使用“headerCellClass”选项。

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

【讨论】：

非常感谢，这正是我所追求的。我不知道为什么我在自己的文档中找不到它。我在您的代码 sn-p 中添加了一些内容，以防 plunker 和/或文档出现故障（我不太可能知道，但在这里完善您的示例并没有什么坏处）。 :-)