SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

最先端テクノロジーに対応した高速・軽量なJavaScript UIライブラリ「Wijmo」の活用(AD)

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

グリッドを表示する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)
図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)
図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)
図4 セル表示のカスタマイズ例(003_wijmo_flexgrid3.html)

次のページ
ICollectionViewインターフェースでページングやフィルタを実現

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
最先端テクノロジーに対応した高速・軽量なJavaScript UIライブラリ「Wijmo」の活用連載記事一覧

もっと読む

この記事の著者

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/8595 2015/11/10 15:30

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング