Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

jQueryを利用した軽量・高機能なクライアントサイド実装!

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2011/07/12 14:00
目次

 順に解説します。

(1)CSSとJavaScriptの参照

 「必要な環境」で記載した場所にスクリプトファイルやCSSファイルがあるので、それらをサンプルファイルのフォルダ上に展開し、HTMLページからインポートします。

(2)データスキーマの作成

 DataSchemaクラスでまず、元のデータからどの部分のどの情報を取得するかというスキーマを定義しておきます。今回は、取得するoDataのデータから名前、公開年、概要に絞ってスキーマを作成します。DataSchemaクラスの第1パラメータにスキーマの型を、第2パラメータのフィールドにデータフィールド名を、それぞれ指定します(例:{name: "データフィールド名"})。

 第3パラメータには、データを取得するためのパスを指定します。サンプルでもそうですが、oDataやWCFの場合、JSONで値を取得すると、dがフィールド値となります。実際にoDataを取得した例が図7です。一番最初にdが記載されていることが確認できます。

図7 oDataのデータ取得例
図7 oDataのデータ取得例

(3)データソースのオブジェクト生成

 igDataSourceのDataSourceクラスはデータソースからデータを取得するのに利用します。一般的な構文は、以下のとおりです。

$.ig.igDataSourceメソッドの構文
var ds = new $.ig.DataSource({ オプション名: 値, ... }).dataBind();

 $.ig.DataSourceメソッドには、以下のようなオプションを指定できます。

igDataSourceの主なオプション(*は必須)
オプション 概要
type* データソースの型
dataSource* データソースオブジェクト
callback データ取得時に実行されるコールバック関数
schema データのスキーマを指定(DataSchemaクラス)
responseDataKey データレコードのパスを指定

 今回のサンプルでは、外部のoDataからデータを取得するので、typeオプションにremoteUrlを、データソースはoDataのURLを、スキーマには(2)で設定したスキーマを指定しています。パラメータの設定後、dataBindメソッドを呼び出すことで、データが取り込まれます。

 ここまでがigDataSourceを利用したデータ管理の部分です。以降はigGridの機能です。

(4)各種設定やデータソースを設定し、#iggridにグリッドを生成

 igGridメソッドは高機能なグリッドを生成します。一般的な構文は、以下のとおりです。

igGridメソッドの構文
$("Gridを格納するテーブル要素").igGrid({ オプション名: 値, ....});

 以下は、igGridメソッドで利用できるオプションです。

igGridで使用率の高いオプション(*は必須)
オプション 概要
caption グリッドのタイトル
columns* 列に関する情報をオブジェクト配列で指定(headerText:ヘッダーの表示名、key:表示する列名など)
dataSource* データソースオブジェクトを指定
scrollbars スクロールバー表示の有無を指定(bool型)
virtualization 仮想化機能の利用の有無を指定(bool型)
height 高さを指定。virtualizationを使用する場合は必須項目
features ページング、ソート、セレクションなど、グリッドに持たせたい機能を個別に指定

 今回の例では、id="iggrid"であるテーブルに対して、igGridメソッドを適用し、グリッドを生成しています。columnsオプションでグリッド列のヘッダーテキストと表示データ、列幅をそれぞれ指定しています。

 dataSourceオプションには直接、WCFやJSONなどのデータソースを指定することもできます。この場合、スキーマ定義が別途必要です。今回はigDataSourceでスキーマ定義などを実施しているため、データソースオブジェクトとしてigDataSourceオブジェクトを指定するだけでOKです。

 featuresオプションでは、その他のグリッド機能を定義します。1つめはページング(Paging)機能です。nameで、ページング機能を有効化し、pageSizeで1ページ辺りに表示するレコードを指定しています。typeは、ページングの処理をクライアントサイドで実行することを表しています(他にはremoteurlがありますが、サーバーに要求を送信する分、パフォーマンスは劣化します)。また、ソーティング(Sorting)、行選択(Selection)、フィルタリング(Filtering)を有効化します。

 igDataSourceとigGridの基本的な使い方は以上です。実行すると図2~6の動作を確認できます。

[参考]仮想化テクノロジーの活用

 NetAdvantage for jQueryでは、膨大な量のデータを読み込む際に、画面に表示されている部分のオブジェクトのみを生成する「仮想化」テクノロジーが多く使われています。igGridでは、virtualizationオプションをtrueにすることで、グリッドで表示されている部分のみ描画される仮想化機能が使用できます。

 仮想化機能を利用すると、レコードの分だけDOMを生成するのではなく、既存のDOM要素を再利用するため、メモリやCPUのパフォーマンスが改善されます(図8)。

 

図8 virtualization有効時と無効時のDOMの違い
図8 virtualization有効時と無効時のDOMの違い

 virtualizationオプションではheightオプションの指定が必須です。そして、heightの値により一度に表示される値の量が変わるため、パフォーマンスが変動します。多くの値をが表示するようにした場合には、僅かではありますが、パフォーマンスに影響が出る可能性がありますので注意してください。

まとめ

 今回はjQueryの拡張コンポーネントNetAdvantage for jQueryの中でも目玉と言えるigDataSourceとigGridにフォーカスを当てて解説しました。サンプルソースから、非常に少ない手間で、高機能なコンポーネントの利用ができることが確認いただけたのではないでしょうか。また、今回は触れていませんが、ほとんどのコンポーネントがASP.NET MVCのヘルパーとして利用できます。プロジェクトで採用する場合はヘルパーの利用も検討してみるといいでしょう。

 業務アプリケーション開発や掲示板やフォーラムの一覧表示などでグリッドはまだまだ需要があるコンポーネントです。軽量で高速、かつ高機能なコンポーネントを利用したい場合はNetAdvantage for jQueryを利用してみてはいかがでしょうか。



  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト ナオキ(ナオキ)

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

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

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:Infragistics NetAdvantageチュートリアル

もっと読む

All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5