【Ext JS】 レコードのフィルタリング
2009.03.24 Author: Jas
今回はデータストア(DataStore)のレコードの中から条件にあったレコードだけを取り出すフィルタリングについて紹介します。
フィルタリングで何が嬉しいかというと・・・？
例えばデータをExt.gridで出力している場合にララジオボタンやチェックボックスで条件を選択させ、条件にあった行だけをグリッド上に表示させるというようなことが可能となるのです。
それでは、下記の表を使ってフィルタリングの説明をしたいと思います。
| item_id | category | name | display_flg |
| 1 | A | みかん | 0 |
| 2 | A | りんご | 0 |
| 3 | B | うどん | 0 |
| 4 | B | そば | 1 |
| 5 | B | ラーメン | 0 |
| 6 | C | コーラ | 0 |
| 7 | C | オレンジジュース | 1 |
まず、カテゴリAの商品だけ出力するには、以下のようにします。
// データストア(DataStore)
var ds = new Ext.data.Store({
fields: [
{name: 'item_id', type: 'int'},
{name: 'category', type: 'string'},
{name: 'name', type: 'string'},
{name: 'display_flg', type: 'int'}
]
});
// dsに表のデータをロード
// カテゴリAでフィルタリング
ds.filter('category', 'A');
あるフィールドのデータだけでフィルタリングするのではなく、ｆｉｌｔｅｒBy()でフィルタ用関数を用いて、複数のフィールドでフィルタリングの条件を指定することもできます。
この時、フィルタ用関数の返り値がtrueのが出力データとして残り、それ以外のものはフィルタリングされます。
// カテゴリがBで表示フラグが0
ds.filterBy(function(rec) {
if (rec.get('category'') == 'B' && rec.get('display_flg') == 0) {
return true;
}
return false;
});
filterByのフィルタ用関数には引数で各レコードのデータが渡されます。
レコードからgetでフィールドの値を取得し、フィルタリングの条件を指定することができます。
例ではカテゴリがBでかつ表示フラグが0の行だけを取り出します。
このように簡単にレコードのフィルタリングを行うことができますので、ぜひ使ってみてください。
名古屋のWebシステム開発・ネットワーク構築会社 コネクティボへ
