gpt4 book ai didi

sapui5 - 如何做成长表/列表

转载 作者:行者123 更新时间:2023-12-05 01:44:02 25 4
gpt4 key购买 nike

JS

var model = new JSONModel();
model.setData(data);
this.getView().byId("Table").setModel(model);
var table = this.getView().byId("Table");
table.bindItems({
path: "/",
template: new sap.m.ColumnListItem({
cells: [
new sap.m.Image({
src: "{photo}"
}),
new sap.m.Text({
text: "{name}"
})
]
})
});

这里我的数据很少。使用上面的代码我可以在表中列出。现在我只想列出表中的前 10 个项目,其余数据仅在向下滚动后显示。向下滚动鼠标后,我需要调用一个函数来获取接下来的 10 个数据。我们如何在 sapUi5 中向下滚动后调用函数;

最佳答案

O数据

为了启用滚动增长,您需要考虑以下因素:

  • ListBase (由 sap.m.Table 使用)需要:
    • growing="true"
    • growingThreshold="<number of entries to load>"
    • growingScrollToLoad="true"
  • 列表控件需要在 scrollable container 中.

    (growingScrollToLoad) can only be used if the growing property is set to true and only if there is one instance of sap.m.List or sap.m.Table inside the scrollable scroll container (e.g sap.m.Page). source

运行此示例以查看它的实际效果:

sap.ui.getCore().attachInit(() => sap.ui.require([
"sap/ui/model/odata/v2/ODataModel",
"sap/ui/core/mvc/XMLView",
], function(ODataModel, XMLView) {
"use strict";

const model = new ODataModel({
serviceUrl: [
"https://cors-anywhere.herokuapp.com/",
"https://services.odata.org/V2/Northwind/Northwind.svc/",
].join(""),
preliminaryContext: true,
tokenHandling: false,
});
sap.ui.getCore().loadLibrary("sap.m", true).then(() => XMLView.create({
definition: `<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" displayBlock="true">
<App>
<Page showHeader="false">
<List
growing="true"
growingThreshold="10"
growingScrollToLoad="true"
busyIndicatorDelay="0"
items="{
path: '/Products',
parameters: {
select: 'ProductID, ProductName'
},
templateShareable: false
}"
>
<StandardListItem title="{ProductName}" />
</List>
</Page>
</App>
</mvc:View>`,
models: model,
}).then(view => view.placeAt("content")));
}));
<script id="sap-ui-bootstrap"
src="https://openui5nightly.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-libs="sap.ui.core"
data-sap-ui-theme="sap_fiori_3"
data-sap-ui-async="true"
data-sap-ui-compatVersion="edge"
data-sap-ui-modules="sap/ui/thirdparty/datajs"
data-sap-ui-xx-waitForTheme="true"
></script><body id="content" class="sapUiBody"></body>


How we can call a function after scroll down in SAPUI5?

手动 Hook

如果没有 OData 服务(没有 $top$skip ),但当用户几乎到达列表末尾(通过滚动或键盘)时仍然需要通知应用程序,您可以使使用 sap.ui.core.delegate.ScrollEnablement .并且由于列表控件应该已经在 scrollable container 中了。 (例如 Page ),创建 ScrollEnablement 的新实例没有必要。相反,有一个方便的 API 可以检索相应的 ScrollEnablement。委托(delegate)是 getScrollDelegate .获得委托(delegate)对象后,调用 setGrowingList 它等待一个钩子(Hook)函数,该函数在几乎到达底部时被调用。

例子:

sap.ui.require([
"sap/m/library"
], sapMLib => sapMLib.getScrollDelegate(myListControl).setGrowingList(() => {
// Your code to load more data
}, sapMLib.ListGrowingDirection.Downwards));

注意事项

  • API getScrollDelegate当可滚动父控件已经有 created an instance of ScrollEnablement 时只返回引用渲染之前。
  • API setGrowingList protected ,这意味着它不打算由应用程序开发人员使用。请仅在扩展目标控件时使用该 API。

关于sapui5 - 如何做成长表/列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47632790/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com