Step 25: Sorting and Grouping

데이터 모델에서 주문을 표시 대신 알파벳순으로 정렬한다. 또한 제품을 제공하는 회사를 추가한다.

Preview

Coding

Walkthrough - Step 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 : 'ShipperName',
				group : true
			}
		}">
	<headerToolbar>
		<Toolbar>
			<Title text="{i18n>invoiceListTitle}"/>
			<ToolbarSpacer/>
			<SearchField width="50%" search=".onFilterInvoices"/>
		</Toolbar>
	</headerToolbar>
	<items>
		…
	</items>
</List>
</mvc:View>

데이터 Path를 지정하고 sorter 속성을 추가한다.
송장 항목을 정렬은 데이터 path를 지정하면 자동으로 수행된다.
기본적으로 정렬은 오름차순이지만, 정렬 순서를 변경하려면 sorter 속성 내에서 descending을  true로 지정하면 된다.
sorter 속성에 group을 true로 설정하면 송장 품목을 자동으로 그룹화한다. 
SAPUI5의 List 및 데이터 Binding 기능은 Group header을 자동으로 표시하고 그룹의 항목을 분류한다.
groupHeaderFactory 속성을 설정하여 원하는 경우 custom grouping function를 정의 할 수 있다.

Related Information

API Reference: sap.ui.model.Sorter

Sample: List - Grouping