在我的angularjs应用程序中,我在(几乎)每个页面上显示一个“主表”.这个表有数千个逻辑行,但只有几个物理行(因此它可以快速避免巨大的DOM开销).
物理行数与数据无关(即使没有逻辑行,我也会显示它们).我实现了表的滚动,我希望它完全适合窗口,因此不需要滚动页面.
为此,我需要知道适合多少行.每行的高度是固定的(使用高度：20px！重要和溢出：隐藏).该表是页面上的最后一件事.所以在理论上,我所需要的只是
var t = $("main-table");
var extraHeight = $(window).height - t.position().top - t.height() - someReserve;
var extraRows = Math.floor(extraHeight) / normalRowHeight);
physicalRows.length += extraRows;
问题是我不知道价值何时稳定下来.我从physicalRows.length = 10开始,在执行上面的代码后,我应该得到正确的长度.但我不…所以我使用$timeout迭代它,它的工作原理.
但随着桌子的增长和随机收缩,它看起来不太好.例如,我得到以下长度：
10 -> 33 -> 31 -> 30 -> 30 (done)
调整数量没有帮助,甚至加倍normalRowHeight也没有避免超调.我试图限制增长,以避免萎缩.当窗口滚动条暂时显示时,收缩看起来特别糟糕,使得正确的桌边向左和向后跳跃.但唯一有效的是
extraRows = Math.max(extraRows,1);
随着桌子逐渐增长,这看起来很糟糕.没有它,我偶尔会得到一个类似的序列
10 -> 33 -> 56 -> 36 -> 31 -> 30 -> 30 (done)
增加到56来自HTML在迭代之间没有更新.
我能做什么？有没有办法找出尺寸合适的时候？
我介绍了迭代计算,因为直接计算不正常.问题有多种原因：
>行高不是完全恒定的,这导致需要多次迭代.
>我正在听窗户大小和桌子的位置和大小.有一些去抖,但它分别适用于每个事件源.有时两个事件在同一摘要迭代中离开(即,在表可以调整大小之前),这导致序列10-> 33 – > 56.
我的问题是为一个简单的问题尝试一个太复杂的解决方案.迭代隐藏了原始问题并引起了其他问题.答案让我放弃了这个愚蠢的想法.
>您从physicalRows的基本数组构建主表
>你计算“剩下多少空间”
>您更新physicalRows
>你根据新数组更新主表(我是否正确？)
>回到2
如果确实是这个过程,你可以通过在公式中不使用table.height来避免循环部分：
// no extraHeight : get the full height available for your table
var height = $(window).height - t.position().top - someReserve;
// no extraRows : get the full rowCount
var rowCount = Math.floor(extraHeight) / normalRowHeight);
// if you want to display at least 10 rows :
rowCount = Math.max(rowCount,10);
// no adding to existing size : set the correct size
physicalRows.length = rowCount;
由于此计算不依赖于表高度,因此您确定在更新表的行时不会更改该值.
第二个是行的高度：height属性不考虑边框宽度或填充,因此表中行的实际高度将高于单元格的height属性.
参见例如：https://jsfiddle.net/1sm3oct1/
即使在桌子的单元格上有一个高度：20px！重要属性,实际高度看起来更像23px.
使用css并单击“运行”以查看实际的桌面高度.
您可以尝试通过测试行的实际大小来查找：
// testing several pages show that the table's rows are 5px larger than
// height in css :
var normalRowHeight = 20 + 5;
或使用现有表格计算其中一行的高度：
var normalRowHeight = t.height() / physicalRows.length;
你也可以看看他跟随SO问题：How to fix height of TR ?
