问题: 我有一个大的表,有20列,150行。这些列可以由用户调整大小(请考虑excel)。每个单元格都有溢出:隐藏集。需要头脑风暴的高性能溢出检测器的一些想法
- 当文本在任何给定的细胞溢出我想给一个提示用户这种情况的发生。
约束:
- 这必须在IE6表现良好。这意味着如果你在IE6上这样做,你不会在使用它的时候杀死某个人。
问题: 我有一个大的表,有20列,150行。这些列可以由用户调整大小(请考虑excel)。每个单元格都有溢出:隐藏集。需要头脑风暴的高性能溢出检测器的一些想法
约束:
这就是我最终使用的。它工作在只有IE浏览器,但是这是确定在这种情况下:
添加此CSS规则具有容器溢出:隐藏
text-overflow:ellipsis;
前言:我不知道如何(或如果)这将在IE6中执行。
可能有其他方法可以做到这一点,但你可以使用嵌套元素,并比较它们的offsetHeight属性:
<html>
<head>
<style type="text/css">
td { width: 80px; border: 1px solid #000; }
td div { height: 20px; overflow: hidden; }
.highlight { background-color: #efe; }
</style>
</head>
<body>
<table>
<tr>
<td><div><span>A B C</div></span></td>
<td><div><span>D E F G H I J</span></div></td>
<td><div><span>K L M</span></div></td>
</tr>
<tr>
<td><div><span>N O P</span></div></td>
<td><div><span>Q R S</span></div></td>
<td><div><span>T U V W X Y Z</span></div></td>
</tr>
</table>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready
(
function()
{
$("td div").each
(
function()
{
var collapsedHeight = $(this).attr("offsetHeight");
var actualHeight = $("span", this).attr("offsetHeight");
// if the inner span is taller than the div, make the div green
if (actualHeight > collapsedHeight)
$(this).addClass("highlight");
}
);
}
);
</script>
</body>
</html>
我认为最好的方法是通过(例如)写入缓冲溢出检测到每次用户将数据输入到单元格中时都会自定义属性。
因此,您将使用类似于Lobstrosity
的方法,但不是最初计算溢出,而是每次单元输入更改时计算溢出。这有一个明显的缺点,就是无法为预先填充的单元格工作,在这种情况下,您必须在程序启动时为所有填充的单元格计算它。
另一个硬核选项用于修复单元尺寸(换句话说,假设单元尺寸在页面生成时已知)并计算服务器端页面生成的溢出(假设您正在使用服务器侧面语言)。它很好看,但很有效。
IE6 ......真的吗?我想有人会在开发它的同时杀死一个人。 – 2009-10-30 20:22:42
什么不杀你让你更强。 – mkoryak 2009-10-30 22:11:16