使用 SAPUI5 和 HandsOnTable 进行无限滚动
Posted
技术标签:
【中文标题】使用 SAPUI5 和 HandsOnTable 进行无限滚动【英文标题】：Infinite Scroll with SAPUI5 and 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"
expandable="false" expanded="false"
expandAnimation="true" expand="">
<content>
<HTML xmlns="sap.ui.core" id="HTMLCon" busy="false"
busyIndicatorDelay="1000" visible="true"
content="<div id='sheetContainer' style='width: 100%; height: 550px; overflow: auto' data-originalstyle='width: 100%; height: 450px; overflow: auto' class='handsontable'></div>"
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);
请帮忙实现无限滚动。
【问题讨论】：
【参考方案1】：无限滚动已经通过handsontable 实现，因为它使用虚拟渲染（假设您指定了宽度和高度和/或将溢出属性设置为“自动”）。
您使用scrollTop 是正确的。您获得如此大数字的原因是它是滚动元素顶部的位置。所以如果你在滚动之前调用 scrollTop，你会得到一个 0 的值。如果你在向下滚动 670 像素之后调用它，你会得到一个 670 的值。这是一个很好的行为，因为它可以帮助你知道你有多远已经滚动了。
您可以做的是通过首先计算一行的高度来计算您滚动了多少行，并且（假设它们的高度都相同）只需将 scrollTop 的值除以该值即可。我认为 handosntable 将高度设置为 23 像素，所以如果 scrollTop 给你 670，那么我认为你一定已经滚动了大约 30 行；确认以确保这是正确的方法。
现在，如果您尝试延迟加载，您可以在滚动时设置一个事件，当超过某个行数阈值时，它会调用您想要的任何函数。应该这样做！
【讨论】：
感谢@ZekeDroid 的回答。我一定会试试这个。但是，由于我工作的要求发生了变化，并且无限滚动不在要求中，所以我还没有尝试过。另外，我不知道是否有直接的方法来确定 HandsOnTable 方法中的行数[github.com/handsontable/handsontable/wiki/Methods] 但是，有一种方法可以找到行高，也有一种方法可以找到可见行数。因此，可以使用。 当然，无论您想使用哪种方法都可以。我只是想明确一点，scrollTop 提供了非常有用的信息，乍一看并不直观。祝您好运，如果您认为问题已得到解答，请关闭该问题。以上是关于使用 SAPUI5 和 HandsOnTable 进行无限滚动的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Handsontable 中实现“查找和替换”逻辑？