使用基于JavaScript的SVG库的表头中的垂直文本 [英] Vertical text inside table headers using a JavaScript-based SVG library
问题描述
我使用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,自下而上)并尽可能使用而无需在绝对定位模式下工作。
I use jqGrid with many columns containing boolean information, which are displayed as checkboxes inside the table (see http://www.ok-soft-gmbh.com/VerticalHeaders/TestFixedO.htm as an example). To display information more compactly I use vertical column headers. It works very well and works in jqGrid in all browsers (see my discussion with Tony Tomov in jqGrid forum http://www.trirand.com/blog/?page_id=393/feature-request/headers-with-vertical-orientation/), but in IE vertical text is blurred and doesn't look nice enough (open the link above in IE and you will see exactly what I mean). I was asked from users why the text displayed so strangely. So I'm thinking of using a JavaScript-based SVG library like SVG Web ( http://code.google.com/p/svgweb/ ) or Raphaël ( http://raphaeljs.com/ ). SVG is very powerful and it is difficult to find a good example. I need only to display vertical text (-90 grad, from the bottom up) and use if possible without working in mode of absolute positioning.
还有一个时间我的问题:我需要有可能在< td>
元素中显示垂直文字( - 90 grad rotation )表头的。我想使用基于JavaScript的SVG库,如 SVG Web 或Raphaël。解决方案必须支持 IE6 。有没有人有一个很好的参考例子可以帮助我做到这一点?如果有人发布问题的完整解决方案,我会很高兴。
So one more time my question: I need to have a possibility to display vertical text (-90 grad rotation) inside <td>
elements of a table header. I want to use a JavaScript-based SVG library like SVG Web or Raphaël. The solution must support IE6. Does anybody have a good reference example which could help me do this? If somebody posts a whole solution of the problem I would be happy.
确切地说,这是我当前的解决方案:我定义
To be exact here is my current solution: I define
.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 */;
}
define 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);
创建jqGrid后。
And include a call like RotateCheckboxColumnHeaders(grid, 110);
after creating jqGrid.
推荐答案
这是一个有效的jsfiddle。它应该在IE 6中工作,我只使用jquery和raphael js。我为raphael绘图区域和文本制作了静态大小,但你可以做一些数学计算出动态大小:
Here's a working jsfiddle that does it. It should work in IE 6, I only used jquery and raphael js. I made static sizes for the raphael drawing area and the text, but you can certainly do a little math to figure out dynamic sizes:
代码看起来像这个如果你包括jquery和raphael:
Code looks like this if you include jquery and 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看起来像这样:
And the HTML looks like this:
<table>
<thead>
<tr>
<th><div id="columnOne"><span>heading one</span></div></th>
<th><div id="columnTwo"><span>heading two</span></div></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
</tr>
</tbody>
</table>
哦,我用这个作为我的例子: http://raphaeljs.com/text-rotation.html
Oh, and I used this as my example: http://raphaeljs.com/text-rotation.html
这篇关于使用基于JavaScript的SVG库的表头中的垂直文本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!