バージョン

代替行表示テンプレートの作成 (igTemplating)

トピックの概要

目的

このトピックでは、テンプレート エンジンを使用して代替行表示テンプレートを作成する方法を紹介します。

前提条件

以下の表は、このトピックを理解するための前提条件として必要なトピックを示しています。

このトピックの内容

このトピックは、以下のセクションで構成されます。

代替行表示テーブル テンプレートの作成

概要

この例では、基本的な置換テンプレートを作成し、結果を HTML テーブルに追加します

プレビュー

以下のスクリーンショットは最終結果のプレビューです。

前提条件

この手順を実行するには、以下が必要です。

  • テンプレート エンジンで必要な最低限の js ファイルのセットを参照する空の HTML ページ。(詳細については、igTemplating 参照の追加を参照してください)。

手順

以下の手順は、代替行表示テンプレートを作成する方法を示します。

  1. テンプレート エンジンを使用した行テンプレートの追加と適用

    1. アテンション行のための CSS クラスの追加:

      JavaScript の場合:

       <style type="text/css">
       .alternateRow
       {
             background-color: #C0C0C0;
       }
 </style>

    2. サンプル データと行テンプレートのページへの追加

      JavaScript の場合:

       <script type="text/javascript">
 var employees = [
 { firstName: "Joseph", lastName: "Sommers", age: 17 },
 {  firstName: "Anna", lastName: "Paterson", age: 25}, 
 {  firstName: "Mark", lastName: "Smith", age: 22},
 {  firstName: "John", lastName: "Rider", age: 35}];
 var template = '{{if $i%2 == 0 }}' +
 '<tr><td><b>First Name: </b>${firstName}</td>' + '<td><b>Last Name: </b>${lastName}</td>' +'<td><b>Age: </b>${age}</td></tr>' +
 '{{else}}' +
 '<tr class="alternateRow">' +'<td><b>First Name: </b>${firstName}</td>' +'<td><b>Last Name: </b>${lastName}</td>' +'<td><b>Age: </b>${age}</td></tr>'+
 '{{/if}}';
 </script>

      HTML の場合:

       <body>
 <table id="resultTable" style="border: 1px solid #000;"></table>
 </body>

      1. テンプレートを適用し、結果を HTML テーブルに追加します。

        JavaScript の場合:

        <script type="text/javascript">
$(document).ready(function () {
   var result = $.ig.tmpl(template, employees);
   $('#resultTable').html(result);
});
</script>

  2. (オプション) 結果を確認します。

    ファイルを保存し、ダブル クリックして結果をプレビューします。適用された条件に従い、偶数行に alternativeRow クラスが適用されます。

関連コンテンツ

トピック

このトピックの追加情報については、以下のトピックも合わせてご参照ください。

オンラインで表示: GitHub