このトピックは、以下のセクションで構成されます。
Ignite UI for jQuery™ グリッド、つまり igGrid™ は JavaScript、HTML、および CSS で完全にビルドされたクライアント側グリッド コントロールです。このコントロールのクライアント特有の性質によりサーバー側の技術に関係なく、PHP、Ruby on Rails®、Java™、Python™、Microsoft® ASP.NET™ などでビルドされ、アプリケーションとシームレスに相互作用を行うことができます。
グリッドはモジュール アーキテクチャを使用して構築されており、データ ソースとオプション機能は論理的にグリッド コントロールとは分離しています。プレゼンテーションのロジックが分離していることで、関連付けられたデータ ソース コントロールがページング、並べ替え、フィルタリングなどの機能の処理を引き受けることができます。一方、グリッド自体はプレゼンテーションの詳細にのみ関係します。グリッドがこのモジュール構造でビルドされている一方、まずデータ ソース、次にグリッドを設定する必要はありません。グリッド コントロールのパブリック インターフェイスを介してデータ ソースを簡単に構成できます。
注: このコンテキストのグリッド「機能」は、ページング、並べ替え、フィルタリング、および他の類似のインタラクティブ属性などのグリッド コントロールの一般特性として定義されます。これらの機能のほとんどはブラウザーで実行される場合が多いのですが、データ ソース コントロールはサーバーにメッセージを送信して、サーバー側の処理に対応することができます。詳細については、以下の「機能」のセクションを参照してください。
グリッドの機能はモジュールで追加され、関連付けられたスクリプトとスタイル シート ファイルは必要な場合のみ、クライアントにオンデマンドで提供されます。グリッド自体は、どのグリッド機能にも依存していません。
グリッドは jQuery UI 基本ウィジェットを拡張し、すべてのグリッド機能も jQuery ウィジェットとして実装されます。基本グリッド コードは ig.ui.grid.framework.js (これは結合されていないスクリプト インタスタンスのファイル名です) に実装されています。このスクリプト ファイルには、グリッドの次のビルディング ブロックのコードが含まれています。
igGrid ウィジェット コードグリッドは、グリッドにマークアップを注入するためサブスクライブし、使用しているイベントを発行することで、異なるモジュールと通信します。さらに、各機能はグリッド イベントを使用しながら、グリッド API およびオブジェクト モデルにフル アクセスできます。
図 1 は、上位レベルからのグリッド アーキテクチャを示します。クライアント側データ ソース コントロール、つまり igDataSource™ はグリッドのコア機能の中心にあります。データは、クライアントまたはサーバーのいずれかからデータ ソースに入り、データ ソース コントロールは、最終描画の処理と準備のためデータをグリッドに公開します。オプション機能がグリッドに追加されると、その論理部分は自動的にデータ ソース コントロールに追加され実行されます。機能のロジックは、データ ソース コントロールの構成方法に応じて、クライアントまたはサーバーで実行できます。
図 1: Infragistics jQuery グリッド アーキテクチャのレイアウト
注: グリッドを取り巻くアーキテクチャが切断されているため、
igDataSourceコントロールを使用してデータ処理する独自のカスタム ウィジェットを開発することもできます。
すでに説明したように、クライアント側のデータ ソースは、グリッドなどクライアント側のデータ バインドされたコンポーネントと実際のデータ ソース間の仲介レイヤーとしての役割を果たします。igGrid コントロールと違い、データ ソース コントロールはウィジェットまたは jQuery プラグインではなく、単純な JavaScript クラスとして実装されています。コントロールをそれぞれクラスに構成するには John Resig の単純な継承アプローチを使用します。
$.ig.MashupDataSource 拡張子を使用して複数のフラットなデータ ソースの組み合わせを実現するなど)このアーキテクチャにより、特定の目的を果たすデータ ソースの拡張子を簡単に作成できます。これらのケースの例は、基本データ ソース コントロールを拡張する次のクラスで構成されています。
dataSource プロパティは、基点がローカルまたはリモートのサポートされているデータ形式の配列を受け取ります。これらのデータ形式を組み合わせて、プライマリ キーと外部キーの関係を使用してマッシュアップ シナリオを実現しています。注: 上記に一覧されたコントロールは、Ignite UI for jQuery データ ソース JavaScript ライブラリに組み込まれています。
また、高度にカスタマイズされたデータ バインド機能を実現するため、データ ソース コントロールを拡張してそのいずれかの実装をオーバーライドできます。リスト 1 は基本データ ソースを拡張して、JSON データを処理するオプションをあらかじめ構成する方法を示しています。
リスト 1: JSON データを処理するオプションを事前設定するための igDataSource の拡張
JavaScript の場合:
$.ig.JSONDataSource = $.ig.DataSource.extend({
init: function (options) {
if (!options) {
options = {};
}
// set the type to 'json' so you don’t have to explicitly set it later
options.type = "json";
this._super(options);
return this;
},
});
リスト 2 は、Ajax ではなく Web Sockets を使用するようカスタマイズされたデータ ソースを実装する多少複雑な例を示し、データ ソース アーキテクチャの柔軟性を示してます。
リスト 2: Web ソケットと相互作用するための igDataSource の拡張
JavaScript の場合:
(function ($) {
$.ig.WebSocketsDataSource = $.ig.DataSource.extend({
init: function (options) {
options.responseDataType = "json";
options.responseContentType = "json";
options.type = 'remoteUrl';
this._super(options);
return this;
},
// use the HTML5 WebSockets API here instead of calling $.ajax
_processRequest: function (options) {
if(!("WebSocket" in window)) {
throw new Error("Sorry, the build of your browser does not support WebSockets. Please use latest Chrome or Webkit nightly.");
}
//options.dataSource is the one to initiate the connection to
var ws = new WebSocket(options.url);
this.context = this;
ws.onmessage = $.proxy(this._dataFilter, this);
},
_dataFilter: function (evt, type) {
var resp = this._super(JSON.parse(evt.data), "json");
if (this.settings.responseBehavior === "append") {
this._data.push(resp);
this._dataView.push(resp);
} else {
this._data = [resp];
this._dataView = [resp];
}
this._completeCallback();
}
});
}(jQuery));
データ ソース コントロールの目的がデータの処理と管理である場合、グリッド コントロールは主にデータのユーザー インターフェイス レイヤーとしての役割を果たします。データ ソース コントロールにより発行されたイベントに応答する際、グリッドはデータへバインドを行い、JavaScript の必要な DOM 要素を生成して UI を作成します。機能が追加されると、グリッドはそれらの機能で発行されたイベントを使用して、データ ソース アクションに対してさらに UI をカスタマイズします。
var igDs = $('#grid1').data('igGrid').dataSource;
グリッドは、標準 jQuery プラクティスにしたがって JSON オブジェクトをパラメーターとして渡すことで構成されます。オプション パラメーターの扱い方についての詳細は、「jQuery UI ウィジェットの処理」を参照して、jQuery UI ウィジェットの一般的な使用方法に慣れてください。
グリッド機能は、リスト 3 で示すように、JSON オブジェクトをグリッド パラメーターとして提供することでグリッド初期化中に宣言されます。
リスト 3: JSON オブジェクト パラメーターによる igGrid コントロールの構成
JavaScript の場合:
$("#grid2").igGrid({
dataSource: "/server.php",
columns: [ "<columns definitions>" ],
features: [
{
name: "Paging",
type: "local",
pageSize: 10
},
{
name: "Sorting",
type: "local",
caseSensitive: true,
columnSettings: [
{columnKey: "ProductID", allowSorting: true}
]
}
]
});
グリッドがいったん jQuery UI Framework でインスタンス化されたら、次に選択されたすべての機能を解析し、適用します。グリッドは機能ごとに内部 jQuery UI ウィジェットをインスタンス化することで開始され、グリッドが元々バインドされていた要素にバインドされます。初期化と作成が終わったら、グリッドのインスタンスを介して任意の機能とそれに関連付けられた API にアクセスできます。
リスト 4 は機能オプションのアクセス方法を示しています。この場合、グリッドの現在のインスタンスから並べ替えを行っています。
リスト 4: グリッドから直接機能インスタンスへのアクセス
JavaScript の場合:
var sortingObject = $("#grid1").data("igGridSorting");
リスト 5 は機能 API の操作方法を示しています。最初の例は、並べ替えの大文字小文字の区別を有効にする方法を示しているのに対して、2 つ目の例はデータへの単純な並べ替えを実行しています。
リスト 5: 機能 API メンバーの処理
JavaScript の場合:
// changes the case sensitive option of the sorting feature. This options works only for local sorting.
$("#grid1").igGridSorting("option", "caseSensitive", true);
// sorts a column
$("#grid1").igGridSorting("sortColumn", … ) ;
igGrid コントロールは jQuery ウィジェットとしてビルドされているため、 jQuery UI だけでなく jQuery コア アライブラリに依存しています。特定のバージョンの jQuery UI は必要ではないですが、最適な結果を得るために、次のバージョンを推奨します。
jQuery UI 1.12.*
注: jQueryTemplating を true に設定して jQuery テンプレートを有効にする場合、jquery-tmpl JavaScript ライブラリをアプリケーションに組み込む必要があります。このライブラリーは https://github.com/jquery/jquery-tmpl からダウンロードできます。
オンラインで表示: GitHub