Step 25: Sorting and Grouping

介绍

To make our list of invoices even more user-friendly, we sort it alphabetically instead of just showing the order from the data model. Additionally, we introduce groups and add the company that ships the products so that the data is easier to consume.

1.练习效果

2.源码

You can view and download all files at Walkthrough – Step 25.

We add a declarative sorter to our binding syntax. As usual, we transform the simple binding
syntax to the object notation, specify the path to the data, and now add an
additional sorter property. We specify the data path by which the
invoice items should be sorted, the rest is done automatically. By default, the
sorting is ascending, but you could also add a property descending
with the value true inside the sorter property to change the
sorting order.

If we run the app now we can see a list of invoices sorted by the name of the
products.

We modify the view and add a different sorter, or better; we change the sorter and
set the attribute group to true. We also specify the path to the
ShipperName data field. This groups the invoice items by the
shipping company.

As with the sorter, no further action is required. The list and the data binding features of
SAPUI5 will do the
trick to display group headers automatically and categorize the items in the groups.
We could define a custom grouping function if we wanted by setting the
groupHeaderFactory property, but the result looks already
fine.