如何确定拟合表行数

Question

在我的angularjs应用程序中,我在(几乎)每个页面上显示一个"主表".这个表有数千个逻辑行,但只有几个物理行(因此它可以快速避免巨大的DOM开销).

物理行数与数据无关(即使没有逻辑行,我也会显示它们).我实现了表的滚动,我希望它完全适合窗口,因此不需要滚动页面.

为此,我需要知道适合多少行.每行的高度是固定的(使用height: 20px !IMPORTANT和overflow: hidden).该表是页面上的最后一件事.所以在理论上,我所需要的只是

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.

我的问题是为一个简单的问题尝试一个太复杂的解决方案.迭代隐藏了原始问题并引起了其他问题.答案让我放弃了这个愚蠢的想法.

Answer 1

如果我理解正确的话：

1. 你main-table从一个基本数组构建你的physicalRows
2. 你计算“还剩下多少空间”
3. 你更新physicalRows
4. 您main-table根据新数组进行更新（我正确吗？）
5. 回到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;

由于此计算不依赖于表高度，因此您可以确定，当您更新表的行时，该值不会改变。

第二件事是行的高度：高度属性不考虑边框宽度或填充，因此表格中行的实际高度将高于单元格的高度属性。

例如，请参见： https: //jsfiddle.net/1sm3oct1/
即使height: 20px !important表格单元格上有属性，实际高度看起来也更像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;

您还可以看看他下面的问题：How to fix height of TR ?