UI5-文档-4.25-Sorting and Grouping

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

 

Preview

 

The list is now sorted and grouped by the shipping company

Coding

You can view and download all files at 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 : '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>

我们修改视图并添加不同的排序器，或者更好;我们更改排序器并将属性组设置为true。我们还指定ShipperName数据字段的路径。这是根据货运公司对发票项目进行分组。

 

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

 

Parent topic: Walkthrough

Previous: Step 24: Filtering

Next: Step 26: (Optional) Remote OData Service

Related Information

API Reference: sap.ui.model.Sorter

Sample: List - Grouping