元記事 (英語) ： Taz Abdeali　http://community.infragistics.com/blogs/taz_abdeali/archive/2011/04/21/jquery-templating-tips-amp-tricks.aspx

この記事では、私が今までプラグインをテンプレート化する作業で学んだいくつかのトリックをご紹介します。jQuery テンプレート プラグインは、使えば使うほど便利なことが分かります。HTML へのコンストラクタの作成やクライアント データ ソースへのバインドにとどまらず、さまざまな機能が利用できます。テンプレート シンタックスを使用し、コア ロジックとは別に UI ビュー構造を保持できるため、複雑なデータも簡単に表示できます。 
 

新しい Infragistics jQuery グリッドを使用しますが、jQuery テンプレート ビューでトリックを使用できます。 以下はこの記事でご紹介するシナリオです。

• 条件付きスタイルをテーブル行に適用します。

• 生 HTML データを変換してグリッド セルで有効な HTML コンテンツへ表示します。

• チェックボックス列を挿入し、はい / いいえがチェックされた状態およびチェックが解除された状態にデータを変換します。

• 日付列を書式設定します 

テンプレート使用前:

テンプレート使用後: 

グリッドの設定

まず、このページに使用するすべての css と JavaScript 参照を設定します。CDN を使用し jQuery コア、jQuery UI & テンプレート プラグインをプルします。Infragistics グリッドは、すべてのコントロール、ウィジェット、単一ファイルを含む JavaScript ファイルの縮小された gzip バージョンを使用します。 CSS も同じように設定します。

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.2.min.js" type="text/javascript"></script>  
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.js" type="text/javascript"></script>  
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
<script src="Scripts/ig.ui.min.js" type="text/javascript"></script>

<link href="Styles/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<link href="Styles/base/ig.ui.editors.css" rel="stylesheet" type="text/css" />
<link href="Styles/base/ig.ui.grid.css" rel="stylesheet" type="text/css" />
<link href="Styles/ig/jquery.ui.custom.css" rel="stylesheet" type="text/css" />

データを取得したら Infragistics jQuery グリッドになるページに要素が必要です。まず、簡単なテーブル要素を使用して ID を割り当てます。 

<table id="igGrid">
</table>

この記事でさまざまなシナリオを表示するために、サンプル データを作成しました。ページの読み込みで JSON データを作成し、ローカル JavaScript オブジェクトに保存します。 

var jsonData = { "data": [{ "Rank": "1", "HTML": " This text is bold ", "Valid": "yes", "Date": "Sun, 10 Apr 2011 17:31:42 +0000" },
{ "Rank": "3", "HTML": "Visit Infragistics click here", "Valid": "no", "Date": "Mon, 20 Jun 2005 10:10:10 +0000" },
{ "Rank": "2", "HTML": "
Unorderd List 
 List Item 
 List Item 
", "Valid": "no", "Date": "Mon, 29 May 2000 15:15:10 +000" },
{ "Rank": "2", "HTML": "This text is italics ", "Valid": "yes", "Date": "Thu, 21 Mar 1985 22:22:22 +000" },
{ "Rank": "1", "HTML": "Strike through", "Valid": "no", "Date": "Fri, 13 Nov 2015 13:30:30 +000" }
]};

データが準備できたらグリッドへバインドします。 グリッドはクライアント サイド jQuery プラグインで、テーブル要素を上記のように定義し、 jQuery プラグインと同じ方法でグリッド コントロールへ変換できます。 テンプレートの定義にフィールド名を使用し、TD 内でカプセル化すると、クライアント サイド JSON データにバインドした Infragistics グリッドが作成されます。

$("#igGrid").igGrid({
      autoGenerateColumns: true,
      rowTemplate: "<tr>" +
                   "${Rank}" +
                   "${HTML}" +
                   "${Valid}" +
                   " ${Date}" +
                   "</tr>",
       columns: [
       	     { headerText: "Rank", key: "Rank", width: "50px" },
        	     { headerText: "HTML", key: "HTML", width: "300px" },
                   { headerText: "Valid", key: "Valid", width: "50px" },
                   { headerText: "Date", key: "Date", width: "230px" }
                ],
        dataSource: jsonData.data,
        width: 650
});

グリッドでデータの表示をするために、以下のようなテンプレートのトリックを使用します。

条件付き書式行

まず Rank 1 で行の書式設定に色を使用して目立たせます。グリッド行テンプレートを編集してクラス属性を TR へ追加します。Rank 1 の場合、その行の背景色を定義する CSS を取得します。使用する CSS クラスを設定します。クラスを作成し、背景色を設定するだけです。 

.green
{
     background-color:#33FF33;
}

行テンプレートでは、 TR を以下のように変更できます。
注: 波括弧を使用することにより、条件付きステートメントをテンプレート内に挿入し、条件が true の場合のみ実行します。 Rank フィールドが 1 の場合、行が緑色になります。

<tr class={{if Rank == '1'}} 'green' {{/if}}>

生 HTML を HTML コンテンツとして表示するデータへ変換する

フェーズ 2 では、HTML 列に表示されている生データを取得して、HTML コンテンツとして適切に表示します。タスクを簡素化するテンプレートの {{html}} タグを使用します。この設定により、HTML コンテンツがグリッドの 2 行目に表示されます。 

<td>{{html HTML}}</td>

テンプレートでチェックボックスを使用する

このセクションでは、はい/いいえ テキストの代わりにチェックボックスを表示します。 値が yes にチェックされたチェック ボックスを表示します。フィールド値をチェックするための条件付きステートメントのあるチェックボックスを表示するには、マークアップを追加する必要があります。グリッドに以下のようなチェックボックスを表示しません。3 列目のテンプレートのマークアップは、以下のようになります。 

<td> <input type='checkbox' {{if Valid == 'yes'}} checked='checked'{{/if}} /></td>

日付の書式設定

JSON ソースから取得する日付の書式設定は、エンドユーザーに表示するにはあまり適していません。 書式を変更するには、テンプレートから外部のヘルパーメソッドを使用して、JSON ソースの実際の日付をヘルパー メソッドへ渡します。 日付を取得したら、Date 列に表示します。 テンプレートを少し変更しました。スクリプト ブロックにヘルパー メソッドを追加して、やっと思い通りのグリッドを作成することができました。

<td> ${formatDate(Date)}</td>

function formatDate(d) {
       var date = new Date(d);
       return date.toLocaleDateString();
}

最終マークアップ

テンプレート テクニックをすべてを適用したら、最後のグリッド マークアップは行テンプレート オプションの更新です。 以下は最終的な外観です。jQuery テンプレート テクニックを使用して、グリッド データの表示を変更することが可能となります。 

$("#igGrid").igGrid({
      autoGenerateColumns: true,
      rowTemplate: "<tr class={{if Rank == '1'}} 'green' {{/if}}>" +
           "${Rank}" +
           "{{html HTML}}" +
           " <input checked="checked" valid="=" type="checkbox" />" +
           " ${formatDate(Date)}" +
           "</tr>",
      columns: [
           { headerText: "Rank", key: "Rank", width: "50px" },
           { headerText: "HTML", key: "HTML", width: "300px" },
           { headerText: "Valid", key: "Valid", width: "50px" },
           { headerText: "Date", key: "Date", width: "230px" }
              	],
      dataSource: jsonData.data,
      width: 650
});

まとめ

この記事では、jQuery テンプレートの機能をフルに活用する方法をご紹介しました。 jQuery テンプレートは大変パワフルなため、テンプレートと高度なシンタックス機能を使用してすばやくデータ構造を設定し、データを思い通りに表示できます。jQuery テンプレートは HTML コンストラクタの作成だけにとどまりません。ユーザーにより分かりやすいデータを表示する UI を簡単に作成できます。 メソッドを挿入してテンプレートを使用してデータを操作したり、テンプレートを使用してデータを操作したりすることが可能です。

■ Infragistics jQuery コントロールに関してのご質問は、murtazaa@infragistics.com までご連絡ください。

■ ランタイムのサンプルの表示、サンプルコードはこちらからダウンロードできます。