ICollectionViewインターフェースでページングやフィルタを実現
FlexGridはページングやフィルタなどのデータ操作を行う機能を備えます。以下では、データ操作のために提供されているICollectionViewインターフェースとその実装CollectionViewクラスの利用法を説明します。
FlexGridでデータ操作を行うためには、FlexGridに与えるデータを直接指定する代わりに、リスト5のようにデータ変数を引数に与えて生成したCollectionViewクラスのインスタンスを指定します。このように指定することで、ICollectionViewインターフェースが提供するデータ操作を行えるようになります。
// データを引数に与えてCollectionViewインスタンスを生成 $scope.gridData = new wijmo.collections.CollectionView(gridData); // gridDataはそのままFlexGridのitems-sourceに指定可能
ICollectionViewインターフェース（CollectionViewクラス）のAPIを利用したデータ操作例を以下でいくつか紹介します。
データ操作例1：ページング
ページングを実現するためには、リスト6のようにpageSizeプロパティに1ページあたりのデータ数を指定します。
// データを引数に与えてCollectionViewインスタンスを生成 $scope.gridData = new wijmo.collections.CollectionView(gridData); // ページング指定 $scope.gridData.pageSize = 3;
現在ページや全ページ数の表示、ページ移動のためには表3のメソッド・プロパティを利用します。
| 名称 | 内容 |
|---|---|
| moveToFirstPage() | 先頭ページに移動するメソッド |
| moveToPreviousPage() | 1ページ前に移動するメソッド |
| moveToNextPage() | 1ページ後に移動するメソッド |
| moveToLastPage() | 最終ページに移動するメソッド |
| pageIndex | 現在ページを表すプロパティ（先頭ページが0になる） |
| pageCount | 全ページ数を表すプロパティ |
ページ操作・表示の実装例をリスト7に示します。
<button ng-click="gridData.moveToFirstPage()">先頭</button>
<button ng-click="gridData.moveToPreviousPage()">前</button>
{{gridData.pageIndex + 1 | number}} / {{gridData.pageCount | number}}
<button ng-click="gridData.moveToNextPage()">次</button>
<button ng-click="gridData.moveToLastPage()">最後</button>
リスト6、7を実行すると、データが3行ごとにページングされます。
データ操作例2：フィルタ
フィルタを実現するためには、filterメソッドにフィルタ処理を実装します。検索ワードでフィルタ処理を行う実装例をリスト8に示します。
// フィルタ値変数 ...（1） $scope.filterValue = ""; // データを引数に与えてCollectionViewインスタンスを生成 ...（2） $scope.gridData = new wijmo.collections.CollectionView(gridData); // フィルタ処理を実装 ...（3） $scope.gridData.filter = function(item) { // フィルタ未指定のときは無条件true if (!$scope.filterValue) { return true; } // フィルタ指定されているときはname属性とマッチング else { return item.name.indexOf($scope.filterValue) > -1; } }; // フィルタ変数（filterValue）が変更された時の処理 ...（4） var filterDescriptor; $scope.$watch('filterValue', function () { // timeout実行中の場合はいったん解除 if (filterDescriptor) { $timeout.cancel(filterDescriptor); } // 一定時間遅延後フィルタ適用 ...（5） filterDescriptor = $timeout(function () { $scope.gridData.refresh(); }, 1000); });
（1）は画面で入力された検索ワードが格納される変数です。（2）でデータからCollectionViewインスタンスを生成し、（3）でCollectionViewのフィルタ処理を実装します。フィルタ処理は「フィルタに合致した時にtrue、合致しない時にfalse」を返すようにします。ここではフィルタ値とデータのname属性を比較して部分一致した時にtrueを返しています。（4）ではフィルタの変数が変更された時に（検索ワードの入力とフィルタ適用処理が競合しないよう）一定の遅延時間後にフィルタを適用する（5）のrefreshメソッドを実行しています。遅延の処理にはAngularJSが提供する$timeoutを使用しています。
リスト8を実行すると、入力したフィルタ値と部分一致した製品名のデータだけがリストされるようになります。
データ操作例3：グループ化
グループ化を実現するためには、groupDescriptionsプロパティにグループ化の情報を表すGroupDescriptionクラスのインスタンスを指定します。実装例をリスト9に示します。
// グループを表す変数 ...（1） $scope.groupValue = ""; // データを引数に与えてCollectionViewインスタンスを生成 ...（2） $scope.gridData = new wijmo.collections.CollectionView(gridData); // グループ（group）が変更された時の処理 ...（3） var filterDescriptor; $scope.$watch('groupValue', function () { // 現在のgroupDescriptionsをクリア ...（4） $scope.gridData.groupDescriptions.clear(); if ($scope.groupValue.length > 0) { // グループ名を取得してgroupDescriptionsに設定 ...（5） var groupNames = $scope.groupValue.split(','); angular.forEach(groupNames, function(groupName, i) { var groupDesc = new wijmo.collections.PropertyGroupDescription(groupName); $scope.gridData.groupDescriptions.push(groupDesc); }); } });
（1）は選択されたグループの値に対応する変数で、データの列名（「name」「version」など）が格納されます。（2）でデータからCollectionViewインスタンスを生成し、（3）でグループの変数が変更された時にgroupDescriptionsを更新してグループ表示を適用しています。まず（4）ですでに適用されたgroupDescriptionsをクリアし、（5）ではカンマ区切りで指定されたグループ名のそれぞれからグループを指定しています。ここでPropertyGroupDescriptionはGroupDescriptionクラスの子クラスで、グループ名（データの列名）でグループを指定できます。なおループ処理にはAngularJSが提供するangular.forEachメソッドを使用しています。
リスト9を実行すると、指定されたデータ列でデータをグループ表示できます。
まとめ
本記事では、グレープシティのJavaScriptライブラリ「Wijmo 5」が提供するグリッド部品「FlexGrid」について、機能や使用法をサンプルコードとともに紹介しました。FlexGridのAPIや、ICollectionViewインターフェースによるデータ操作の仕組みは、従来より提供されている.NET版のFlexGridを下敷きにしているため、.NET版の利用経験を生かして開発が可能です。経験がない利用者にとっても、.NET版で実績のあるAPIを用いてHTML／JavaScript環境でグリッド部品を利用できるメリットがあります。
次回記事ではチャートやゲージ、入力部品など、Wijmo 5が備えるFlexGrid以外のJavaScriptコントロールについて説明します。
