Question

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

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

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

我只是想知道这是否可能，以及是否有人知道它？

Answer 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

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

1 个答案: