Question

我正在尝试实现无限滚动，即在使用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);
}

请帮助实现无限滚动。

Answer 1

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

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

你可以做的是通过首先计算一行的高度来计算你滚动的行数（假设它们都是相同的高度），只需将scrollTop的值除以此值即可。我认为handosntable将高度设置为23像素，所以如果scrollTop给你670，那么我认为你必须滚动大约30行;确认这是确保这是正确的方法。

现在，如果您正在尝试延迟加载，则可以在滚动时设置一个事件，在传递一定数量的行数时，会调用您想要的任何函数。应该这样做！

使用SAPUI5和HandsOnTable进行无限滚动

1 个答案: