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

Question

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

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

Answer 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

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

How do I apply styling to sorted columns in Angular ui-grid?

sorting

styling

angularjs

angular-ui-grid