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

Question

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

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

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

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

Answer 1

您或许可以提供自己的 header 单元格模板并修改 header 的创建方式。

这是一个简单的例子

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);
  }

将此 header 单元格模板添加到需要垂直文本的列中。 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

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

Vertial column heading text in ui-grid

angularjs

css

angular-ui-grid