ui-grid 中的垂直列标题文本答案

【问题标题】：Vertial column heading text in ui-gridui-grid 中的垂直列标题文本
【发布时间】：2015-05-13 05:00:24
【问题描述】：

我正在尝试在列标题中使用垂直文本编写一个有角度的 ui-grid（新的 ng-grid），但使用标准 CSS 技巧得到了一些有趣的结果

.blue { 
  color: blue;
  transform: rotate(90deg);
    transform-origin: left;
    height:100px;
  }

http://plnkr.co/edit/CtDEcgSrebLFnBXcMrjS?p=preview

我只是想知道这是否可能，是否有人对此有所了解？

【问题讨论】：

你想达到什么结果？

标签： angularjs css angular-ui-grid

【解决方案1】：

您可能可以提供自己的标题单元格模板并修改标题的创建方式。

这是一个简单的例子

function headerCellTemplate() {
    return $timeout(function() {
      $scope.waiting = 'Done!';
      $interval.cancel(sec);
      $scope.wait = '';
      return "<div ng-class=\"{ 'sortable': sortable }\"><!-- <div class=\"ui-grid-vertical-bar\">&nbsp;</div> --><div class=\"ui-grid-cell-contents verticalText\" col-index=\"renderIndex\"><p class=\"verticalTextSpan\">{{ col.displayName CUSTOM_FILTERS }}</p> <span ui-grid-visible=\"col.sort.direction\" ng-class=\"{ 'ui-grid-icon-up-dir': col.sort.direction == asc, 'ui-grid-icon-down-dir': col.sort.direction == desc, 'ui-grid-icon-blank': !col.sort.direction }\">&nbsp;</span></div><div class=\"ui-grid-column-menu-button\" ng-if=\"grid.options.enableColumnMenus && !col.isRowHeader  && col.colDef.enableColumnMenu !== false\" ng-click=\"toggleMenu($event)\" ng-class=\"{'ui-grid-column-menu-button-last-col': isLastCol}\"><i class=\"ui-grid-icon-angle-down\">&nbsp;</i></div><div ng-if=\"filterable\" class=\"ui-grid-filter-container\" ng-repeat=\"colFilter in col.filters\"><input type=\"text\" class=\"ui-grid-filter-input\" ng-model=\"colFilter.term\" ng-attr-placeholder=\"{{colFilter.placeholder || ''}}\"><div class=\"ui-grid-filter-button\" ng-click=\"colFilter.term = null\"><i class=\"ui-grid-icon-cancel\" ng-show=\"!!colFilter.term\">&nbsp;</i><!-- use !! because angular interprets 'f' as false --></div></div></div>";
    }, 10);
  }

将此标题单元格模板添加到需要垂直文本的列中。可以根据需要修改 css，

.verticalText
{
  height:100px;
}

.verticalTextSpan
{
  margin:auto;
  padding-left:50px;
     -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform:rotate(90deg);
    transform: rotate(90deg);
}

http://plnkr.co/edit/d78TfLAgbuAT0ungoNLR?p=preview

【讨论】：

谢谢，让它与不断变化的列数一起工作仍然有点棘手，但对于恒定的表大小来说，这就是诀窍。