使用基于 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> 表头的元素.我想使用基于 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 */;
}

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

并在创建 jqGrid 后包含一个类似 RotateCheckboxColumnHeaders(grid, 110); 的调用.

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:

http://jsfiddle.net/UYj58/9/

如果包含 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屋！