jQueryの全体像Page3クライアントサイドでデータ管理するigDataSourceと高機能なグリッドigGridPage4(1)CSSとJavaScriptの参照(2)データスキーマの作成(3)データソースのオブジェクト生成(4)各種設定やデータソースを設定し、#iggridにグリッドを生成まとめクライアントサイドでデータ管理するigDataSourceと高機能なグリッドigGridigDataSourceは、igGridコントロールなどのデータバインドコントロールとデータソースの間で動作するコンポーネントです。igDataSourceがサポートするソースは、以下のとおりです。Webサービス全般(oData、WCFなど)ローカルデータ(JSON、XML、HTMLテーブル、JavaScript配列など)関数の戻り値igGridはigDataSourceなどのデータソースをもとに仮想化やページング、ソートや、フィルター機能をクライアントサイドで実現する高機能で軽快に動作するグリッドコンポーネントです。それぞれのコンポーネントの関係は図2のようになります。igDataSourceとigGridなお、igDataSourceとigGridを使用することで、図3~6のようなグリッドが簡単に作成できます。igDataSourceとigGrid実行直後フィルターの方法も、ドロップダウンから選択できます(図4)。igDataSourceとigGrid値を入力することでフィルター結果がすぐに反映されます(図5)。igDataSourceとigGrid行選択やページング機能も、すべてクライアントサイドで動作します(図6)。igDataSourceとigGridデータは、oDataとして提供されているアメリカのオンラインDVDレンタル会社Netflixのデータを使用しています。それでは、サンプル作成について解説します。コードは以下の通りです。