Step 25: Sorting and Grouping

Step 25: Sorting and Grouping

https://openui5.hana.ondemand.com/topic/c4b2a32bb72f483faa173e890e48d812

列表的排序与分组

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>

1，第一个path，指定list控件的数据，源于哪里
2，第二个path，指定使用哪个字段的值，进行排序。
3，执行的结果是按照ProductName的字母表升序排序的。

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>

1，执行结果是先按照ShipperName分组，然后按照ShipperName的字母表升序排序。
2，path：指定使用哪个字段排序
3，group：指定是否分组

------------------------------------------------2024/7/1更新--------------------------------------------

    <List
        id="invoiceList"
        headerText="{i18n>invoiceListTitle}"
        class="sapUiResponsiveMargin"
        width="auto"
        items="{
            path: 'invoice>/Invoices',
            sorter: [
            {
                path : 'ShipperName',
                group : true,
                descending: true
            },
            {
                path : 'ProductName'
            }],
            
            groupHeaderFactory: '.getGroupHeader'
        }"
    >

sorter是个数组，里面的第一个属性是第一排序的顺序，第二个属性是第二排序。
分组后，组里的再排序如何实现：sorter数组里，第一个字段是分组字段，第二个是分组后的排序字段

groupHeaderFactory属性的指是个函数，目的是自定义组的头部显示的文本，函数体再对应的controler里。下面的代码就是手动加了个“ sd”的字符串

getGroupHeader: function (oGroup){
			return new GroupHeaderListItem({
				title: oGroup.key + " sd"
			});
		},

vx:xiaoshitou5854