sapui5 - SAPUI5 GridList 组件分组问题
问题描述
我想为 GridList 组件使用分组功能。但是当我使用分组功能时,列表项不能显示单独的行。所有项目都显示在内联位置。我正在使用与此url中相同的编码
这是我的观点的屏幕截图https://ibb.co/M90Pb5T
这是我的编码:
<mvc:View xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
xmlns:grid="sap.ui.layout.cssgrid"
xmlns:f="sap.f" controllerName="SapUI5Tutorial.RootApp">
<Panel>
<content>
<f:GridList items="{
path: '/DataList',
sorter: {
path: 'groupTitle',
group: true
}
}">
<f:customLayout>
<grid:GridBoxLayout boxWidth="15rem"/>
</f:customLayout>
<f:GridListItem>
<VBox >
<VBox class="sapUiSmallMargin">
<layoutData>
<FlexItemData growFactor="1" shrinkFactor="0" />
</layoutData>
<Title text="{title}" wrapping="true" />
<Label text="{subtitle}" wrapping="true" />
</VBox>
</VBox>
</f:GridListItem>
</f:GridList>
</content>
</Panel>
这是controller.js(初始化函数)
var data = [
{ title: "Grid item title 1", subtitle: "Subtitle 1", groupTitle: "Group A" },
{ title: "Grid item title 2", subtitle: "Subtitle 2", groupTitle: "Group A" },
{ title: "Grid item title 3", subtitle: "Subtitle 3", groupTitle: "Group A" },
{ title: "Grid item title 10", subtitle: "Subtitle 10", groupTitle: "Group B" },
{ title: "Grid item title 11", subtitle: "Subtitle 11", groupTitle: "Group B" },
{ title: "Grid item title 12", subtitle: "Subtitle 12", groupTitle: "Group B" },
];
oModel.setProperty("/DataList", data);
我在哪里做错了?
请让我知道这个问题。我想看到 GroupHeaderListItem 的单独行。
解决方案
我在网上进行了一些研究,并通过将sap.f
库添加到index.html
文件来解决了这个问题。
这是代码:
<script id ="sap-ui-bootstrap"
src = "https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme = "sap_belize"
data-sap-ui-libs = "sap.m,sap.tnt,sap.f,sap.ui.commons,sap.ui.table,sap.ui.ux3"
data-sap-ui-bindingsyntax = "complex"
data-sap-ui-compatversion = "edge"
data-sap-ui-resourceroots = '{ "SapUI5Tutorial": "./" }'></script>
推荐阅读
- linux - linux shell变量到aws命令错误
- react-native - 如何在 RN FlatList 中使用图像延迟加载
- sql-server - SQL-计算时间差的平均值
- laravel - 使用 laravel 提交表单后需要调用该函数
- android - Google Play - 通过 Alpha、Beta 和生产渠道审核流程
- angular - TypeError:无法读取 null 的属性“令牌”
- sql - 按非固定时间间隔查询分组
- sql - T-SQL - 带有前导零的 CAST char 到 int
- excel - 当错误抛出时,我正在处理错误以跳到下一步。第一次错误工作正常,第二次抛出错误
- android - 改造 SocketTimeoutException 时崩溃