1

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

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

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

我希望能够旋转我的标题。

我能够做到这一点，使用各种 jQuery 插件（屏幕截图中使用的是这个），它在各种导航器中工作（见这里）但它们都不能在 IE7 中工作（见这里）

没有 jQuery，使用

过滤器： progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

我能够旋转文本，但它的容器仍然没有适应新的大小（见这里）：宽度没有减少，高度没有增加。所以，使用这个：

表 tr:first-child { 高度: 200px; }

我固定了第一行的高度（这并不完美，因为我不知道单元格内容会有多长，但仍然......），但这并没有改变单元格的宽度：见这里。使用这个：

表 tr:first-child td { 宽度: 30px; }

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

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

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

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

  • 是否有任何与 IE 兼容、能够旋转标题的 jQuery 网格插件？
  • 是否可以使用 CSS 甚至 Javascript 在 IE中进行这项工作？

谢谢，

PS：我的限制是兼容 IE（至少 IE7，更好的 IE6，但如果这不可能，那是不可能的。），而不是避免使用 JavaScript。我可以尝试不使用它，但如果需要，它将在客户端计算机上可用。但是，我使用的 JS 库仍然需要与 IE7 兼容。

4

1 回答 1

0

我终于能够使用 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）

下一步

我的下一步是现在能够将单元格内容向下对齐到底部，请参见此处。

于 2012-10-18T10:25:41.783 回答