LoginSignup
0

More than 5 years have passed since last update.

【SAPUI5】リストのソートとグループ化

Posted at

はじめに

今回は、リストのソート、グループ化の方法についてご紹介します。
Listのプロパティを変更するだけで、簡単に実装できます。

前提:【SAPUI5】入門編の記事まとめ(2)

製品名順にソート

まずは以下のように、製品名順にソートされるようにします。
WS000072.JPG

ソース

App.view.xmlで、Listのプロパティを以下のように追加します。

                            <List 
                                id="productList"
                                items="{
                                    path: 'mPricelist>/products',
                                    sorter: {
                                        path: 'name'
                                    }
                                }">

idは前回フィルタを実装した際に追加したもので、ソートとは関係ありません。
変更前のitems属性は以下の内容でした。
<List items="{mPricelist>/products}">
もともとはpathの内容だけが直接設定されていましたが、今回sorterを追加するのでpathもプロパティ名を明示するようにしました。
sorterには「何順でソートするか」を指定します。今回は製品名順です。
今回はやりませんが、descendingプロパティに"true"を設定すると降順にソートされます。

カテゴリごとにグループ化

モデルに新しい項目「カテゴリ」を追加し、カテゴリごとにグループ化されるようにします。
WS000074.JPG

ソース

まず、Pricelist.jsonファイルに以下のようにcategoryの項目を追加します。
categoryは"Fruits", "Vegetables", "Eggs"の3種類としました。

{ 
    "products" :[
        {
            "name" : "Pumpkin",
            "price": 15.00,
            "currency": "EUR",
            "supplier": "CompanyA",
            "stock": 100,
            "category": "Vegetables"
        },
        {
            "name" : "Apple",
            "price": 200.00,
            "currency": "JPY",
            "supplier": "CompanyB",
            "stock": 99,
            "category": "Fruits"
        },

・・・

次に、App.view.xmlでListのプロパティを以下のように変更します。

                            <List 
                                id="productList"
                                items="{
                                    path: 'mPricelist>/products',
                                    sorter: {
                                        path: 'category',
                                        group: true
                                    }
                                }">

グループ化もsorterのプロパティの一種なので、カテゴリでグループ化すると製品名順のソートは失われてしまいます。
製品名順でソートしつつカテゴリでグループ化したい場合はどうするのかについては、別の機会に調べてみることにします。

Listのプロパティには何が設定できるのか

ソート、グループはListのプロパティに設定できることがわかりました。
しかし、Listのリファレンスを見ても、プロパティに何が指定できるかは書いてありません。
Listオブジェクトの作成時、mSettingsとして色々なプロパティを指定することができるようですが、具体的な設定値は実装サンプルなどを参考にするしかないのかもしれません。今のところのモヤモヤポイントです。
WS000073.JPG

参考にしたページ

Get Started: Setup and Tutorials-Walkthrough-Step 25: Sorting and Grouping

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0