jquery - 如何在 HTML 中用垂直标题文本表示网格？

Question

我想用两个坐标表示“分数”网格:“系统”和“位置”。 分数是0到5之间的数值，另外两个坐标是字符串。

我必须将其表示为与 IE7 兼容的 HTML 表格，但是我面临许多问题:

由于标题(“位置”)是字符串，它们比单元格(数字)占据更多的位置，所以我失去了很多空间(特别是因为位置字符串可能很长)。所以有问题:

I'd like to be able to rotate my headers.

我能够做到这一点，使用各种 jQuery 插件(屏幕截图中使用的插件是 this one )，它在各种导航器中工作(参见 here )但没有一个在 IE7 中工作(参见 here )

没有 jQuery，使用

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

我可以旋转文本，但它的容器仍然不能适应新的大小(参见 here):宽度没有减少，高度没有增加。所以，使用这个:

table tr:first-child { height: 200px; }

我固定了第一行的高度(这并不完美，因为我不知道单元格内容将有多长，但仍然......)，但这并没有改变单元格宽度:参见here .使用这个:

table tr:first-child td { width: 30px; }

没有改变任何东西，宽度仍然和旋转之前一样大。

现在，我想知道是否有办法在 IE7 下进行这项工作，如果可能的话，没有固定的高度/宽度(如 here )。此外，也许还有另一种方式来表示我的数据而不是 HTML 表格:

• 可能是带有垂直图例的散点图
• 使用大型 jQuery 网格插件，例如 jqGrid:但是，我需要找到一个可以旋转表格标题的插件
• 使用 PNG 替换文本标题。但是，我的表中可能有超过 400 列，这样效率高吗？

总而言之，这是我的问题:

• 是否有兼容 IE、能够旋转标题的 jQuery 网格插件？
• 是否有可能制作this使用 CSS 甚至 Javascript 在 IE 中工作？

谢谢，

PS:我的限制是兼容 IE(至少 IE7，更好的 IE6，但如果不可能，那就不可能。)，而不是避免使用 JavaScript。当我可以时，我尽量不使用它，但如果需要，它将在客户端机器上可用。但是，我使用的 JS 库仍然需要与 IE7 兼容。

Answer 1

我终于能够使用 jQuery 和 RaphaelJS 做我想做的事了。

诀窍:将文本转换为 SVG 以便于操作。因为这一切都是使用 JavaScript 完成的，所以不会改变网页语义。

使用方法

HTML

<table>
    <thead>
        <tr>
            <th><div id="column1"><span>aaaaaaaaaaa aaaaaaaa</span></div></th>
            <th><div id="column2"><span>bbbbbbb bbbbbbbbbbbb</span></div></th>
            <th><div id="column3"><span>ccc cccccccccccccccc</span></div></th>
            <th><div id="column4"><span>ddd ddd dddddddddddd</span></div></th>
            <th><div id="column5"><span>eee eee eee eee eee </span></div></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>I</td>
            <td>II</td>
            <td>III</td>
            <td>IV</td>
            <td>V</td>
        </tr>
    </tbody>
</table>

如您所见，在每个列标题中，我们创建一个 div，每次都有不同的 ID(对于 Django，我为此使用对象 ID)如果我们想稍后独立操作每个列，则使用内联跨度, 然后是内容。

Javascript

然后，使用以下代码(在您页面的开头，但不在 中，最好在 之后:

$(document).ready(function(){
$('tr th div').each(function (index, div){
R = Raphael($(div).attr('id'), 10, 200);
R.text(5, 100, $(div).find('span').text())
.rotate(-90, true);
$(div).find('span').hide();
});
});

您需要调整数值(当然除了 -90)以适应您的单元格大小。 当然，您必须在代码中导入 jQuery 和 RaphaelJS。我使用了 jquery-1.8.2.min.js 和 raphael-min.js，它们都可以在各自的元素网站上找到。

CSS

当然，您可以使用自己的 CSS，但是如果您在设置内联文本主题时遇到困难，请尝试使用 RaphaelJS 的 .attr(...) 函数。请记住，您必须使用 R.text(...) 行将它们链接起来:

R.text(...).attr(...).attr(...).rotate(-90, true);

最终渲染

我能够得到这样的东西:

_{(来源:ompldr.org)}

下一步

我的下一步是能够将单元格内容向下对齐到底部，请参阅 here .