使用基于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,自下而上)并尽可能使用,而无需在绝对定位模式下工作.

所以还有一次我的问题:我需要有可能在表头的元素内显示垂直文本(-90 grad rotation).我想使用基于JavaScript的SVG库,如SVG Web或Raphaël.解决方案必须支持IE6.有没有人有一个很好的参考例子可以帮助我做到这一点？如果有人发布了问题的完整解决方案,我会很高兴.

确切地说,这是我目前的解决方案:我定义

.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);在创建jqGrid之后包含一个调用.