はじめに
今回は、リストのソート、グループ化の方法についてご紹介します。
Listのプロパティを変更するだけで、簡単に実装できます。
製品名順にソート
ソース
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"を設定すると降順にソートされます。
カテゴリごとにグループ化
モデルに新しい項目「カテゴリ」を追加し、カテゴリごとにグループ化されるようにします。
ソース
まず、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として色々なプロパティを指定することができるようですが、具体的な設定値は実装サンプルなどを参考にするしかないのかもしれません。今のところのモヤモヤポイントです。
参考にしたページ
Get Started: Setup and Tutorials-Walkthrough-Step 25: Sorting and Grouping