虚拟滚动的搜索实现

Question

对于这个问题，我没有可生成的代码，这是一项研究。我与 angularjs 一起工作，我想创建一个特定的数据网格。此数据网格可以显示大量数据（超过 100 万）。所以我通过捆绑获取数据。我的问题是我不想要页面选择器或无限滚动，但我想要一个虚拟滚动。一个简单的解决方案是根据总行数乘以行高来计算滚动条的高度，这是可行的。但最近我遇到了一个新挑战：行高取决于数据，我无法定义 "standard" 行高来计算滚动高度。

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

感谢您的帮助，我希望我的问题很清楚。

PS: 不知道？

Answer 1

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

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 2

Silvinus，看看这个概念：

虚拟分页/无限滚动

Virtual paging allows the grid to lazy load rows from the server depending on what the scroll position is of the grid.

If the grid knows how many pages in total at the start, the scroll will be sized to match the entire data set despite the data set not loaded from the server.

If the grid does not know how many pages at the start, the scroll will extend automatically until the last row is reached. This feature is known in other grids as infinite scrolling.

注意：分页和虚拟分页是针对同一问题的不同解决方案。不能同时申请。

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

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