グリッドを表示するFlexGridコントロール
以下で、Wijmo 5が提供するFlexGridの機能と利用方法を段階を追って紹介していきます。
シンプルなグリッド表示
前回の連載記事でもFlexGridの単純なサンプルを紹介していますが、再度リスト1のサンプルでFlexGrid利用の概要を説明します。
<script type="text/javascript">
// Wijmoモジュール"wj"を指定して新規モジュールを作成
var myApp = angular.module("MyApp", ["wj"]);
// モジュールにコントローラーを定義
myApp.controller("MyController", ["$scope", function($scope) {
// スコープに変数を設定 ...（1）
$scope.gridData = [
{
"name":"iPhone 6",
"vendor": "Apple",
"ram": "1GB",
"platform":"iOS",
"version":"8.2"
},
// 中略
];
}]);
</script>
</head>
<!-- 中略 -->
<!-- FlexGrid表示 ...（2）-->
<h3>FlexGrid</h3>
<wj-flex-grid items-source="gridData" style="width:700px">
<wj-flex-grid-column header="製品名" binding="name"></wj-flex-grid-column>
<wj-flex-grid-column header="メーカー" binding="vendor"></wj-flex-grid-column>
<wj-flex-grid-column header="メモリ" binding="ram"></wj-flex-grid-column>
<wj-flex-grid-column header="OS" binding="platform"></wj-flex-grid-column>
<wj-flex-grid-column header="バージョン" binding="version"></wj-flex-grid-column>
</wj-flex-grid>
<!-- 以下略 -->
（1）がグリッドに表示するデータ変数gridDataの記述で、データ名とデータ内容の組をJavaScriptオブジェクトとして記述します。一方で（2）がFlexGridの記述です。wj-flex-gridディレクティブがグリッド全体を表し、items-source属性には（1）で記述したgridDataを指定します。wj-flex-grid-columnはグリッドの1列を表し、binding属性の値に対応するgridData内のデータ項目をグリッドに表示します。
リスト1を実行すると図2のようにデータがグリッドに表示されます。
プロパティを指定してFlexGridの動作をカスタマイズ
FlexGridコントロールには動作をカスタマイズできるプロパティが多数定義されています。FlexGridの主なプロパティを表1に示します。プロパティ名は、JavaScriptで指定する場合は先頭が小文字で単語の先頭が大文字（いわゆるキャメルケース）、AngularJSのディレクティブ（独自タグ）属性で指定する場合はハイフンで区切られた小文字（いわゆるチェインケース）で記述します。
|
プロパティ名 （JavaScript） |
プロパティ名 （ディレクティブ属性） |
内容 | デフォルト値 |
|---|---|---|---|
| isReadOnly | is-read-only | 読み取り専用にするかどうか | false |
| allowAddNew | allow-add-new | 行を追加できるかどうか | false |
| allowDelete | allow-delete | 行を削除できるかどうか | false |
| allowSorting | allow-sorting | ヘッダセルをクリックしてソートできるかどうか | true |
| selectionMode | selection-mode | セル選択モード | CellRange |
表1においてselectionModeには以下の値が設定できます。
| 定数 | 内容 |
|---|---|
| None | セル選択不可能 |
| Cell | 1個のセルのみを選択可能 |
| CellRange | 連続する複数のセルを選択可能 |
| Row | 行単位で1行のみ選択可能 |
| RowRange | 行単位で連続する複数行を選択可能 |
| ListBox | 行単位で連続しない複数の行を選択可能 |
FlexGridにプロパティをディレクティブ属性で設定するサンプルをリスト2、3に示します。リスト2はプロパティ指定の記述です。
<h3>FlexGrid</h3>
<wj-flex-grid items-source="gridData" style="width:700px"
allow-add-new="true"
allow-delete="true"
allow-sorting="{{allowSorting}}"
selection-mode="{{selectionMode}}">
<!-- 中略 -->
</wj-flex-grid>
リスト2ではallow-add-newとallow-deleteの各プロパティに固定のプロパティ値を設定しています。一方でallow-sortingとselection-modeはそれぞれスコープに定義される変数allowSorting、selectionModeの値を参照するように記述しています。
プロパティを操作するHTML要素はリスト3です。ソート許可のチェックボックスとセル選択モードのプルダウンはng-model属性の指定により変数allowSorting、selectionModeと紐付け（バインド）されるため、コントロールの変更値が変数を介してFlexGridのallow-sorting、selection-modeプロパティに反映されます。
<h3>ソート許可</h3>
<input type="checkbox" ng-model="allowSorting"/>ソート許可
<h3>セル選択モード</h3>
<div>
<select ng-model="selectionMode">
<option value="None">None</option>
<option value="Cell">Cell</option>
<option value="CellRange">CellRange</option>
<option value="Row">Row</option>
<option value="RowRange">RowRange</option>
<option value="ListBox">ListBox</option>
</select>
</div>
リスト2、3を実行すると、行の追加・削除が可能なグリッドが表示されます。ソート許可とセル選択モードはチェックボックスやプルダウンで変更できます。
HTMLタグでFlexGridの表示をカスタマイズ
1列のグリッドを表すwj-flex-grid-columnディレクティブは、タグ内にHTMLタグを記述して表示をカスタマイズできます。リスト4に記述例を示します。
<wj-flex-grid-column width="32" is-read-only="true"><!-- 属性指定 ...（1）--> <img ng-src="img/{{$item.platform}}.png" /> <!-- 画像を参照 ...（2）--> </wj-flex-grid-column> <wj-flex-grid-column header="製品名" binding="name"></wj-flex-grid-column> <wj-flex-grid-column header="メーカー" binding="vendor"></wj-flex-grid-column> <wj-flex-grid-column header="メモリ" binding="ram"></wj-flex-grid-column> <wj-flex-grid-column header="OSバージョン"> {{$item.platform}} {{$item.version}} <!-- データ結合 ...（3） --> </wj-flex-grid-column>
1行分のデータが格納される$item変数を用いて、（2）ではAngularJSのimgディレクティブで画像ファイル（$item.platformの値に応じて「iOS.png」または「Android.png」）を参照させています。また（3）では$item.platformと$item.versionの値を結合して表示させています。なお表示を整えるため、（1）ではwidthプロパティで列幅を、is-read-onlyプロパティで編集不可を設定しています。
リスト4を実行すると、（2）によりiOSとAndroidで異なるアイコンが表示され、（3）によりOS名とバージョンが結合して表示されます。
