バージョン

igDataSource のクライアント側データへのバインド

概要

このドキュメントは、Ignite UI for jQuery™ データ ソース コンポーネントまたは igDataSource をクライアント側の JavaScript 配列および JSON データにバインドする方法を説明します。クライアント側データにバインドする一般的な方法は、通常の配列にバインドする場合も JSON データにバインドする場合も変わりません。データ ソース配列を構成した後、データを igDataSource コンポーネントにバインドしてから、データ ソースをページ上の UI 要素にバインドする必要があります。クライアント側データにバインドする基本的な手順は類似のパターンに従いますが、このトピックでは、異なるデータ形式を使用する微妙な違いを詳しく説明します。

クライアント側データへのバインド

バインド先の配列の形式に関係なく、データ ソース コンポーネントをサポートするための適切な JavaScript ファイルをページに含めておく必要があります。リスト 1 は、以下の各例を実行するためページに追加する必要のあるスクリプト参照を示しています。

リスト 1: igDataSource コンポーネントの使用に必要な JavaScript ファイル

JavaScript の場合:

<script src="scripts/jquery-1.4.4.js" type="text/javascript"></script>
<script src="scripts/jquery-ui.js" type="text/javascript"></script>
<script src="scripts/infragistics.core.js" type="text/javascript"></script>

注: データ ソースはユーザー インターフェイスに相当する物が組み込まれていないコンポーネントなので、igGridControl コンポーネントは、CSS ファイルを参照する指示がありません。

JavaScript 配列へのバインド

igDataSource コンポーネントをプレーンな JavaScript データ配列にバインドするには、リスト 2 に示すようなページに配列を追加します。

リスト 2: 配列データの配列

JavaScript の場合:

var arrayOfArraysData = [
   ["AED", "Emirati Dirham", "Jun  1 1998 12:00AM"],
   ["AFA", "Afghani", "Jun  1 1998 12:00AM"],
   ["ALL", "Lek", "Jun  1 1998 12:00AM"],
   ["AMD", "Armenian Dram", "Jun  1 1998 12:00AM"],
   ["ANG", "Netherlands Antillian Guilder", "Jun  1 1998 12:00AM"],
   ["AOA", "Kwanza", "Jun  1 1998 12:00AM"],
   ["ARS", "Argentine Peso", "Jun  1 1998 12:00AM"],
   ["ATS", "Shilling", "Jun  1 1998 12:00AM"],
   ["AUD", "Australian Dollar", "Jun  1 1998 12:00AM"],
   ["AWG", "Aruban Guilder", "Jun  1 1998 12:00AM"],
   ["AZM", "Azerbaijanian Manat", "Jun  1 1998 12:00AM"],
];

今度は、最終的にデータがバインドされるデータのコンテナーとして機能する HTML テーブル要素を作成します。リスト 3 は、テーブルのシェルおよび定義済みのテーブル ヘッダーを作成する方法を示しています。

リスト 3: データ ソース コントロールへのバインドをサポートするテーブル構造

HTML の場合:

<table id="t1">
  <thead>
    <tr>
      <th>Currency Code</th>
      <th>Name</th>
      <th>Modified Date</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

次に、テーブルにバインドするデータ系列を描画するために使用する仕組みが必要です。リスト 4 は、リスト 3 で示した定義済みの列ヘッダーに一致する jQuery クライアント テンプレート定義を示しています。

リスト 4: クライアント側データ バインド用の jQuery クライアント テンプレート定義

JavaScript の場合:

 var template = "<tr> <td> ${CurrencyCode} </td> <td> ${Name} </td><td> ${ModifiedDate} </td></tr>"

これで、データ、HTML シェル、およびデータ バインド テンプレートが準備できたので、各要素のバインドに進めます。

リスト 5: jQuery クライアント テンプレートを使用した、データ ソース コンポーネントへの配列のバインドおよびテーブル要素へのデータ ソースのバインド

JavaScript の場合:

var arraySchema = new $.ig.DataSchema("array", {fields:[ 
  {name: "CurrencyCode", type: "string"},
  {name: "Name", type: "string"},
  {name: "ModifiedDate", type: "string"}]
});

ds = new $.ig.DataSource({dataSource: arrayOfArraysData, schema: arraySchema});
ds.dataBind();    

$("#t1 tbody").empty();                
$("#arrayDataTemplate").tmpl(ds.dataView()).appendTo("#t1 tbody");

リスト 5 は、データ ソース コンポーネントのデータ スキーマの定義で始まります。これは、配列がデータ ソースにバインドされるとき、データ バインド中に内部でデータをマップする方法を定義しています。次に、データ形式を配列に設定し、定義済みのスキーマに渡すことによって、データ ソース コンポーネントの新しいインスタンスを作成します。

最後に、格納先テーブルのコンテンツを空にし、jQuery クライアント テンプレートを使用する配列データでテーブルを埋めるためにクライアント テンプレートを使用します。

JSON データへのバインド

igDataSource コンポーネントを JSON データへバインドする方法は、プレーンな JavaScript 配列のバインドに使用する方法とよく似ています。これら 2 つのデータ形式を使用する場合の大きな違いは、JSON データにはオブジェクト定義の中に固有のスキーマがあるため、データ ソース コンポーネントはデータからスキーマを直接推察できる点です。

igDataSource コンポーネントを JSON オブジェクトの配列にバインドするには、リスト 6 に示すようなページに JSON データを追加します。

リスト 6: JSON データの配列

JavaScript の場合:

var products = [];
products[0] = { "ProductID": 1, "Name": "Adjustable Race", "ProductNumber": "AR-5381" };
products[1] = { "ProductID": 2, "Name": "Bearing Ball", "ProductNumber": "BA-8327" };
products[2] = { "ProductID": 3, "Name": "BB Ball Bearing", "ProductNumber": "BE-2349" };
products[3] = { "ProductID": 4, "Name": "HS Ball Bearings", "ProductNumber": "BE-2908" };
products[4] = { "ProductID": 316, "Name": "Blade", "ProductNumber": "BL-2036" };
products[5] = { "ProductID": 317, "Name": "LL Crankarm", "ProductNumber": "CA-5965" };
products[6] = { "ProductID": 318, "Name": "ML Crankarm", "ProductNumber": "CA-6738" };
products[7] = { "ProductID": 319, "Name": "HL Crankarm", "ProductNumber": "CA-7457" };
products[8] = { "ProductID": 320, "Name": "Chainring Bolts", "ProductNumber": "CB-2903" };
products[8] = { "ProductID": 321, "Name": "Chainring Nut", "ProductNumber": "CN-6137" };

今度は、最終的にデータがバインドされるデータのコンテナーとして機能する HTML テーブル要素を作成します。リスト 7 は、テーブルのシェルおよび定義済みのテーブル ヘッダーを作成する方法を示しています。

リスト 7: データ ソース コントロールへのバインドをサポートするテーブル構造

HTML の場合:

<table id="t1">
  <thead>
    <tr>
      <th>ProductID</th>
      <th>Name</th>
      <th>Product Number</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

次に、テーブルにバインドするデータ系列を描画するために使用する仕組みが必要です。リスト 8 は、リスト 7 で示した定義済みの列ヘッダーに一致する jQuery クライアント テンプレート定義を示しています。

リスト 8: クライアント側データ バインド用の jQuery クライアント テンプレート定義

JavaScript の場合:

<script id="JsonDataTemplate" type="text/x-jquery-tmpl">
  <tr> <td> ${ProductID} </td> <td> ${Name} </td> <td> ${ProductNumber} </td>
</script>

これで、データ、HTML シェル、およびデータ バインド テンプレートが準備できたので、各要素のバインドに進めます。

リスト 9: jQuery クライアント テンプレートを使用した、データ ソース コンポーネントへの JSON 配列のバインドおよびそれに続くテーブル要素へのバインド

JavaScript の場合:

var ds = new $.ig.DataSource({
  type: "json", 
  dataSource: products, 
  responseDataKey: "ProductID"});

ds.dataBind();

$("#t1 tbody").empty();                
$($.ig.tmpl(template, ds.dataView())).appendTo("#t1 tbody");

リスト 9 は、まず、データ ソース コンポーネントの新しいインスタンスを作成するために、データ形式を json として設定し、dataSource を JSON 配列に設定し、responseDataKey に値を与えてインデクサー キーを定義しています。

注: responseDataKey の値は、通常、データ ソースのキー付きのフィールドに設定されます。

最後に、格納先テーブルのコンテンツを空にし、jQuery クライアント テンプレートを使用する配列データでテーブルを埋めるためにクライアント テンプレートを使用します。

オンラインで表示: GitHub