使用 SAPUI5 和 HandsOnTable 进行无限滚动答案

【问题标题】：Infinite Scroll with SAPUI5 and HandsOnTable使用 SAPUI5 和 HandsOnTable 进行无限滚动
【发布时间】：2015-06-03 01:20:55
【问题描述】：

我正在尝试实现无限滚动，即在使用 HandsOnTable 插件呈现的表中按需加载数据。该表是使用 SAPUI5 设计的 XML 视图的一部分。我尝试了提到here 的东西。但是即使用户没有滚动到表格的末尾，scrollTop 方法返回的位置值也大于文档和窗口的高度。例如scrollTop 返回的值为 670，$(window).height() 的值为 325。

我也尝试过使用 InfiniteScroll 插件，但没有成功。我的 XML 视图设计如下。

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m" controllerName="poc.itemdesc" xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="Title">
    <content>
        <Panel xmlns="sap.m" id="iPanel" headerText="Items table"
            width="100%" height="auto" expandable="false" expanded="false"
            expandAnimation="true" expand="">
            <content>
                <HTML xmlns="sap.ui.core" id="HTMLCon" busy="false"
                    busyIndicatorDelay="1000" visible="true"
                    content="&lt;div id='sheetContainer' style='width: 100%; height: 550px; overflow: auto' data-originalstyle='width: 100%; height: 450px; overflow: auto' class='handsontable'&gt;&lt;/div&gt;"
                    preferDOM="true" sanitizeContent="false" afterRendering="HandsOnTbl">
                </HTML>
            </content> <!-- sap.ui.core.Control -->
        </Panel>
    </content>
</Page>

HandsOnTable 控制器的代码如下，

HandsOnTbl : function(oEvent){
    var container = document.getElementById('sheetContainer');
    console.log(container);
    var settingsHOT = {
        data : Handsontable.helper.createSpreadsheetData(500, 10),
        colHeaders : [ "Item #",
                       "Attribute Name", "Attribute Value",
                       "Attribute Name", "Attribute Value", 
                       "Attribute Name", "Attribute Value",
                     ],
        contextMenuCopyPaste : {
            swfPath : "res/ZeroClipboard.swf"
        },
        search : true,
        rowHeaders : true,
        contextMenu : true
    };
    HOT = new Handsontable(container, settingsHOT);
}

请帮忙实现无限滚动。

【问题讨论】：

标签： jquery jquery-plugins infinite-scroll sapui5 handsontable

【解决方案1】：

无限滚动已经通过handsontable 实现，因为它使用虚拟渲染（假设您指定了宽度和高度和/或将溢出属性设置为“自动”）。

您使用scrollTop 是正确的。您获得如此大数字的原因是它是滚动元素顶部的位置。所以如果你在滚动之前调用 scrollTop，你会得到一个 0 的值。如果你在向下滚动 670 像素之后调用它，你会得到一个 670 的值。这是一个很好的行为，因为它可以帮助你知道你有多远已经滚动了。

您可以做的是通过首先计算一行的高度来计算您滚动了多少行，并且（假设它们的高度都相同）只需将 scrollTop 的值除以该值即可。我认为 handosntable 将高度设置为 23 像素，所以如果 scrollTop 给你 670，那么我认为你一定已经滚动了大约 30 行；确认以确保这是正确的方法。

现在，如果您尝试延迟加载，您可以在滚动时设置一个事件，当超过某个行数阈值时，它会调用您想要的任何函数。应该这样做！

【讨论】：

感谢@ZekeDroid 的回答。我一定会试试这个。但是，由于我工作的要求发生了变化，并且无限滚动不在要求中，所以我还没有尝试过。另外，我不知道是否有直接的方法来确定 HandsOnTable 方法中的行数[github.com/handsontable/handsontable/wiki/Methods]
但是，有一种方法可以找到行高，也有一种方法可以找到可见行数。因此，可以使用。
当然，无论您想使用哪种方法都可以。我只是想明确一点，scrollTop 提供了非常有用的信息，乍一看并不直观。祝您好运，如果您认为问题已得到解答，请关闭该问题。