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

　順に解説します。

（1）CSSとJavaScriptの参照

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

（2）データスキーマの作成

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

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

図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の違い

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

まとめ

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

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