在SAPUI5的SplitApp中,从一个列表导航到另一个列表,可以通过以下步骤实现:
sap.m
和sap.ui.core.routing
。<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m">
<SplitApp id="mySplitApp">
<!-- 左侧列表 -->
<nav>
<List id="list1" items="{/items}" selectionChange="onListItemPress">
<StandardListItem title="{title}" />
</List>
</nav>
<!-- 右侧列表 -->
<detailPages>
<Page id="page1">
<List id="list2" items="{/subItems}">
<StandardListItem title="{title}" />
</List>
</Page>
</detailPages>
</SplitApp>
</mvc:View>
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/core/routing/History"
], function(Controller, History) {
"use strict";
return Controller.extend("myController", {
onListItemPress: function(oEvent) {
var oItem = oEvent.getParameter("listItem");
var oContext = oItem.getBindingContext();
var sPath = oContext.getPath();
// 获取SplitApp控件
var oSplitApp = this.getView().byId("mySplitApp");
// 获取右侧列表页面
var oPage = this.getView().byId("page1");
// 设置右侧列表的上下文路径
oPage.bindElement({
path: sPath,
model: "modelName"
});
// 导航到右侧列表页面
oSplitApp.toDetail(oPage.getId());
}
});
});
在上述代码中,通过获取列表项的上下文路径,将其绑定到右侧列表页面的元素上,并使用SplitApp控件的toDetail
方法导航到右侧列表页面。
这样,当用户在左侧列表中选择一个列表项时,应用程序将自动导航到右侧列表页面,并显示相应的数据。
推荐的腾讯云相关产品:腾讯云云服务器(ECS)、腾讯云数据库MySQL、腾讯云对象存储(COS)等。您可以访问腾讯云官网了解更多产品信息和详细介绍。
参考链接:
领取专属 10元无门槛券
手把手带您无忧上云