表头中的垂直文本使用基于JavaScript的SVG库
我使用jqGrid包含许多包含布尔信息的列，这些列在表格中显示为复选框（请参阅http://www.ok-soft-gmbh.com/VerticalHeaders/TestFixedO.htm作为示例）。 为了更紧凑地显示信息，我使用垂直列标题。 它运行良好，可以在所有浏览器中使用jqGrid（请参阅我在jqGrid论坛中与Tony Tomov的讨论http://www.trirand.com/blog/?page_id=393/feature-request/headers-with-vertical-orientation/ ），但在IE中垂直文字模糊，看起来不够好（打开IE上面的链接，你会看到我的意思）。 我被问到用户为什么文本显示得如此奇怪。 所以我正在考虑使用基于JavaScript的SVG库，如SVG Web （ http://code.google.com/p/svgweb/ ）或Raphaël （ http://raphaeljs.com/ ）。 SVG非常强大，很难找到一个好的例子。 我只需要显示垂直文本（-90 grad，自下而上）并尽可能使用，而无需在绝对定位模式下工作。
所以还有一次我的问题：我需要有可能在表头的
确切地说，这是我目前的解决方案：我定义
.rotate { -webkit-transform: rotate(-90deg); /* Safari 3.1+, Chrome */ -moz-transform: rotate(-90deg); /* Firefox 3.5+ */ -o-transform: rotate(-90deg); /* Opera starting with 10.50 */ /* Internet Explorer: */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* IE6, IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)" /* IE8 */; }
定义RotateCheckboxColumnHeaders函数
var RotateCheckboxColumnHeaders = function (grid, headerHeight) { // we use grid as context (if one have more as one table on tnhe page) var trHead = $("thead:first tr", grid.hdiv); var cm = grid.getGridParam("colModel"); $("thead:first tr th").height(headerHeight); headerHeight = $("thead:first tr th").height(); for (var iCol = 0; iCol < cm.length; iCol++) { var cmi = cm[iCol]; if (cmi.formatter === 'checkbox') { // we must set width of column header div BEFOR adding class "rotate" to // prevent text cutting based on the current column width var headDiv = $("th:eq(" + iCol + ") div", trHead); headDiv.width(headerHeight).addClass("rotate"); if (!$.browser.msie) { if ($.browser.mozilla) { headDiv.css("left", (cmi.width - headerHeight) / 2 + 3).css("bottom", 7); } else { headDiv.css("left", (cmi.width - headerHeight) / 2); } } else { var ieVer = jQuery.browser.version.substr(0, 3); // Internet Explorer if (ieVer !== "6.0" && ieVer !== "7.0") { headDiv.css("left", cmi.width / 2 - 4).css("bottom", headerHeight / 2); $("span", headDiv).css("left", 0); } else { headDiv.css("left", 3); } } } } };
并包括一个像RotateCheckboxColumnHeaders(grid, 110);类的调用RotateCheckboxColumnHeaders(grid, 110); 创建jqGrid后。
这是一个有效的jsfiddle。 它应该在IE 6中工作，我只使用jquery和raphael js。 我为raphael绘图区域和文本制作了静态大小，但你可以做一些数学计算动态大小：
如果你包含jquery和raphael，代码看起来像这样：
$(document).ready(function(){ var font = {font: '12px Helvetica, Arial'}; var fill = {fill: "hsb(120deg, .5, 1)"} $('tr th div').each(function (index, div){ R = Raphael($(div).attr('id'), 20, 100); R.text(4, 50, $(div).find('span').text()) .attr(font) .attr(fill) .rotate(-90, true); $(div).find('span').hide(); }); });
HTML看起来像这样：
heading one heading two 1 2 4 5
哦，我用这个作为我的例子： http ： //raphaeljs.com/text-rotation.html
Canvas文本转换示例