第25步:排序和分组

说明

为了使发票列表更加用户友好，我们按字母顺序排序，而不是仅仅显示数据模型中的顺序。此外，我们还引入了一些组，并添加了发货公司，以便更容易地使用数据。

---

预览

该列表现在按航运公司进行了排序和分组

代码

你可以在演练-第25步查看和下载所有文件。

webapp/view/InvoiceList.view.xml

<mvc:View
   controllerName="sap.ui.demo.walkthrough.controller.InvoiceList"
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc">
   <List
      id="invoiceList"
      class="sapUiResponsiveMargin"
      width="auto"
      items="{
         path : 'invoice>/Invoices',
         sorter : {
            path : 'ProductName' 
         }
      }" >
      <headerToolbar>
         ...
      </headerToolbar>
      <items>
         ...
      </items>
   </List>
</mvc:View>

我们将声明性排序器添加到绑定语法中。像往常一样，我们将简单的绑定语法转换为对象表示法，指定数据的路径，现在添加一个额外的sorter属性。我们指定对发票项进行排序的数据路径，其余的工作将自动完成。默认情况下，排序是升序的，但是您也可以在sorter属性中添加一个值为true的降序属性来更改排序顺序。

如果我们现在运行该应用程序，就可以看到一个按产品名称排序的发票列表。

webapp/view/InvoiceList.view.xml

<mvc:View
controllerName="sap.ui.demo.walkthrough.controller.InvoiceList"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc">
<List
		id="invoiceList"
		class="sapUiResponsiveMargin"
		width="auto"
		items="{
			path : 'invoice>/Invoices',
			sorter : {
				path : 'ShipperName',
				group : true
			}
		}">
	<headerToolbar>
		<Toolbar>
			<Title text="{i18n>invoiceListTitle}"/>
			<ToolbarSpacer/>
			<SearchField width="50%" search=".onFilterInvoices"/>
		</Toolbar>
	</headerToolbar>
	<items>
		…
	</items>
</List>
</mvc:View>

我们修改视图并添加一个不同的排序器，或者说更好的; 我们更改排序器并将group属性设置为true。我们还指定ShipperName数据字段的路径。这由shipping company分组发票行项目。

与排序器一样，不需要进一步的操作。SAPUI5的列表和数据绑定特性可以自动显示组头并对组中的行项目进行分类。如果需要，我们可以通过设置groupHeaderFactory属性来自定义组头工厂，但结果看起来已经很好了。

章节

1. 第1步:你好世界
2. 第2步:引导
3. 第3步:控件
4. 第4步:XML视图
5. 第5步:控制器
6. 第6步:模块
7. 第7步:JSON模型
8. 第8步:可翻译的文本
9. 第9步:组件配置
10. 第10步:应用程序描述符
11. 第11步:页面和面板
12. 第12步:Shell控件作为容器
13. 第13步:外边距和内边距
14. 第14步:自定义CSS和主题颜色
15. 第15步:嵌套视图
16. 第16步:对话框和片段
17. 第17步:片段回调
18. 第18步:图标
19. 第19步:重用对话框
20. 第20步:聚合绑定
21. 第21步:数据类型
22. 第22步:表达式绑定
23. 第23步:自定义格式器
24. 第24步:过滤
25. 第25步:排序和分组
26. 第26步:远程OData服务
27. 第27步:模拟服务器配置
28. 第28步:使用QUnit进行单元测试
29. 第29步:与OPA的集成测试
30. 第30步:调试工具
31. 第31步:路由和导航
32. 第32步:路由与参数
33. 第33步:路由回溯和历史
34. 第34步:自定义控件
35. 第35步:响应性
36. 第36步:设备适应
37. 第37步:内容密度
38. 第38步:可访问性