Question

我没有为此问题制作代码，这是一项研究。我使用angularjs，我想创建一个特定的数据网格。此数据网格可以显示大量数据（超过100万）。所以我通过捆绑获取数据。我的问题是我不想要页面选择器或无限滚动，但我想要一个虚拟滚动。一个简单的解决方案是计算滚动条的高度取决于总行数乘以行高，它的工作原理。但最近我遇到了一个新挑战：行高取决于数据，我不能定义一个标准＆＃34;行高以计算滚动高度。

我在互联网上搜索，但问题似乎只能通过页面选择器来解决。那么你有什么想法来实现这个目标吗？或任何参考，实施基于我的反思？

感谢您的帮助，我希望我的问题很明确。

PS：不知道？

Answer 1

我不确定ag-grid，但是kendo grid会满足你的需要。以下是使用kendo中的虚拟滚动加载更多数据的链接

本地数据 - http://demos.telerik.com/kendo-ui/grid/virtualization-local-data

远程数据 - http://demos.telerik.com/kendo-ui/grid/virtualization-remote-data。

HTML树网格也不错，结帐 http://htmltreegrid.com/Home/Demo 表现明智似乎都相似。 HTML树网格也有不同用途的网格。但是这种网格的更多定制会失去性能

Answer 2

您不需要定义标准行高......您可以动态测量行高..

HTML TABLE：

<input type="button" onclick="rowHeights();" value="Row Heights">
    <table id="rowHeight" border="1">
        <tr>
            <td>
               Column One<br />
               Big Column
            </td>

            <td>
               Column Two
            </td>
        </tr>
        <tr>
            <td>
               Second row column 1
            </td>
        </tr>
    </table>

JavaScript：

function rowHeights() {
        var tbl = document.getElementById('rowHeight').rows;
        alert("First Row Height: " + tbl[0].offsetHeight);
        alert("Second Row Height: " + tbl[1].offsetHeight);
        //all row height
        var allrowHeight = 0;
        for (var i = 0; i < tbl.length; i++) {
            allrowHeight += tbl[i].offsetHeight;
        }
        alert("Total Row Height: " + allrowHeight);
    }

我希望这会对你有所帮助。 JsFiddle：https://jsfiddle.net/x1Luxb5a/

Answer 3

Silvinus，看看这个概念：

虚拟寻呼/无限滚动

虚拟分页允许网格从服务器延迟加载行   取决于网格的滚动位置。

如果网格在开始时知道总共有多少页，则滚动   尽管没有数据集，但其大小将与整个数据集匹配   从服务器加载。

如果网格在开始时不知道有多少页面，则滚动将会   自动延伸，直到到达最后一行。这个功能是   在其他网格中称为无限滚动。

注意：分页和虚拟分页是针对同一问题的不同解决方案。不可能同时应用两者。

示例： https://www.ag-grid.com/angular-grid-virtual-paging/virtualPaging.html

<强>参考： https://www.ag-grid.com/angular-grid-virtual-paging/

Answer 4

你需要大致计算一下。如果行的高度相似，则估计行的平均高度，或者在保存记录期间，在后端估计行的高度，并将其保存在数据库中（例如，基于文本长度）。然后，当您加载数据时，您可以将所有高度相加，并从服务器获取。

搜索虚拟滚动的实现

4 个答案: