「Wijmo（ウィジモ） 5」が提供する万能グリッド部品FlexGrid

ECMAScript 5に準拠した高速・軽量なJavaScript UIライブラリ「Wijmo 5」の活用 第3回

グリッドを表示するFlexGridコントロール

　以下で、Wijmo 5が提供するFlexGridの機能と利用方法を段階を追って紹介していきます。

シンプルなグリッド表示

　前回の連載記事でもFlexGridの単純なサンプルを紹介していますが、再度リスト1のサンプルでFlexGrid利用の概要を説明します。

リスト1　Wijmo 5とAngularJSでグリッドを表示（001_wijmo_flexgrid1.html）

<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のようにデータがグリッドに表示されます。

図2　FlexGridによるデータ表示（001_wijmo_flexgrid1.html）

プロパティを指定してFlexGridの動作をカスタマイズ

　FlexGridコントロールには動作をカスタマイズできるプロパティが多数定義されています。FlexGridの主なプロパティを表1に示します。プロパティ名は、JavaScriptで指定する場合は先頭が小文字で単語の先頭が大文字（いわゆるキャメルケース）、AngularJSのディレクティブ（独自タグ）属性で指定する場合はハイフンで区切られた小文字（いわゆるチェインケース）で記述します。

表1　FlexGridの主なプロパティ

プロパティ名 （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には以下の値が設定できます。

表2　selectionModeに指定できるセル選択モード

定数	内容
None	セル選択不可能
Cell	1個のセルのみを選択可能
CellRange	連続する複数のセルを選択可能
Row	行単位で1行のみ選択可能
RowRange	行単位で連続する複数行を選択可能
ListBox	行単位で連続しない複数の行を選択可能

　FlexGridにプロパティをディレクティブ属性で設定するサンプルをリスト2、3に示します。リスト2はプロパティ指定の記述です。

リスト2　FlexGridにプロパティを設定する例（002_wijmo_flexgrid2.html）

<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プロパティに反映されます。

リスト3　スコープ変数／メソッドを操作するHTML要素（002_wijmo_flexgrid2.html）

<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を実行すると、行の追加・削除が可能なグリッドが表示されます。ソート許可とセル選択モードはチェックボックスやプルダウンで変更できます。

図3　ソートを有効にしてセル選択モードを変更（002_wijmo_flexgrid2.html）

HTMLタグでFlexGridの表示をカスタマイズ

　1列のグリッドを表すwj-flex-grid-columnディレクティブは、タグ内にHTMLタグを記述して表示をカスタマイズできます。リスト4に記述例を示します。

リスト4　wj-flex-grid-columnディレクティブ内のHTML記述（003_wijmo_flexgrid3.html）

<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名とバージョンが結合して表示されます。

図4　セル表示のカスタマイズ例（003_wijmo_flexgrid3.html）