OSS で利用できる機能
テンプレート エンジン - ネスト テンプレート
このサンプルは、Infragistics テンプレート エンジンを使用してネストされたテンプレートを作成する方法を紹介します。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
このサンプルでは、Infragistics テンプレート エンジンの各機能がデータ ソースのムービー コレクションで繰り返し使用されます。順序指定されていないリストは最後の列のアウトプットとしてリストが作成されます。
コード ビュー
クリップボードへコピー
<!doctype html>
<html lang="en" class="no-js">
<head>
<title>IgniteUI Samples</title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/infragistics.css" rel="stylesheet" />
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.lob.js"></script>
<!-- Ignite UI for jQuery data file required for this sample -->
<script src="/data-files/actors.js" type="text/javascript"></script>
<script id="colTmpl" type="text/template">
<div class='tree'>
<ul>
{{each ${movies} }}
<li>${movies.name}
<ul>
<li>Genre: ${movies.genre}</li>
<li>Year: ${movies.year}</li>
<li><a>
<span class='ratingLabel' style='float:left'>Rating:</span>
<span class='rating'>${movies.rating}</span>
</a>
</li>
<li class='clear'>Languages: ${movies.languages}</li>
<li>Subtitles: ${movies.subtitles}</li>
</ul>
{{/each}}
</ul>
</div>
</script>
<style type="text/css">
.clear {
clear: both;
}
.ui-igrating {
float: left;
}
.ratingLabel {
float: left;
margin-left: 3px;
margin-right: 5px;
}
</style>
</head>
<body>
<script type="text/javascript">
$(function () {
var i = 0, currentValue, limit,
headerTextValues = ["名前", "名字", "国", "映画"],
imagesRoot = "/images/samples/templating-engine/multiConditionalColTemplate";
$("#resultGrid").igGrid({
dataSource: actors,
width: "100%",
autoGenarateColumns: false,
columns: [
{ headerText: headerTextValues[0], key: "firstName", width: 100 },
{ headerText: headerTextValues[1], key: "lastName", width: 200 },
{ headerText: headerTextValues[2], key: "nationality", width: 100, template: "<img width='20' height='15' src='" + imagesRoot + "/${nationality.key}.gif' /> ${nationality.value} " },
{ headerText: headerTextValues[3], key: "movies", width: 300 , template: $( "#colTmpl" ).html()}
],
rendered: function () {
initializeInnerControls();
},
features: [
{
name: "Paging",
type: "local",
pageSize: 4,
pageSizeList: [2, 4, 7],
pageSizeChanged: function () {
initializeInnerControls();
},
pageIndexChanged: function () {
initializeInnerControls();
}
}
]
});
function initializeInnerControls() {
$(".tree").igTree({ hotTracking: false });
limit = $('.rating').length;
for (i = 0; i < limit; i++) {
currentValue = parseFloat($($('.rating')[i]).html());
$($('.rating')[i]).igRating({
voteCount: 10,
value: currentValue,
valueAsPercent: false,
precision: "exact"
});
}
}
});
</script>
<table id="resultGrid"></table>
</body>
</html>
var actors = [{
firstName: "Denzel",
lastName: "Washington",
nationality: {key: "USA", value: "USA"},
movies: [{
name: "American Gangster",
year: 2007,
genre: "Biography, Crime, Drama",
rating: 7.9,
languages: "English, German",
subtitles: "Japanese, English"
}, {
name: "Man on Fire",
year: 2004,
genre: "Crime, Drama, Thriller",
rating: 7.7,
languages: "English, Japanese",
subtitles: "English, Indian"
}, {
name: "Out of Time",
year: 2003,
genre: "Crime, Drama, Thriller",
rating: 6.5,
languages: "English",
subtitles: "English, Japanese"
}, {
name: "Training Day",
year: 2001,
genre: "Crime, Drama, Thriller",
rating: 7.6,
languages: "English",
subtitles: "English, German"
}]
}, {
firstName: "Angelina",
lastName: "Jolie",
nationality: {key: "USA", value: "USA"},
movies: [{
name: "In the Land of Blood and Honey",
year: 2011,
genre: "Drama, Romance, War",
rating: 3.2,
languages: "English",
subtitles: "English, French"
}, {
name: "Kung Fu Panda 2",
year: 2011,
genre: "Animation, Action, Adventure",
rating: 7.4,
languages: "English, Japanese",
subtitles: "Spanish, French"
}, {
name: "The Tourist",
year: 2010,
genre: "Action, Mistery, Romance",
rating: 5.9,
languages: "English",
subtitles: "Spanish, Swedish"
}]
}, {
firstName: "Penelope",
lastName: "Cruz",
nationality: {key: "Spain", value: "Spain"},
movies: [{
name: "Sahara",
year: 2005,
genre: "Action, Adventure, Comedy",
rating: 5.9,
languages: "English, Spanish",
subtitles: "Japanese, French"
}, {
name: "Vanilla Sky",
year: 2001,
genre: "Mystery, Romance, Sci-Fi",
rating: 5.9,
languages: "Spanish",
subtitles: "English, Japanese"
}]
}, {
firstName: "George",
lastName: "Clooney",
nationality: {key: "USA", value: "USA"},
movies: [{
name: "Ocean's Thirteen",
year: 2007,
genre: "Crime, Thriller",
rating: 6.9,
languages: "English",
subtitles: "Spanish, French"
}, {
name: "Syriana",
year: 2005,
genre: "Drama, Thriller",
rating: 7.0,
languages: "English",
subtitles: "French, Japanese"
}, {
name: "Good Night, and Good Luck",
year: 2005,
genre: "Drama, History",
rating: 7.6,
languages: "English, German",
subtitles: "German, Japanese"
}]
}, {
firstName: "Julia",
lastName: "Roberts",
nationality: {key: "USA", value: "USA"},
movies: [{
name: "Eat Pray Love",
year: 2010,
genre: "Drama, Romance",
rating: 5.3,
languages: "English, German",
subtitles: "Spanish, French"
}, {
name: "Notting Hill",
year: 1999,
genre: "Comedy, Romance",
rating: 6.9,
languages: "English",
subtitles: "English, Indian"
}
]
}, {
firstName: "Jason",
lastName: "Statham",
nationality: {key: "UK", value: "UK"},
movies: [{
name: "The Italian Job",
year: 2003,
genre: "Action, Crime, Thriller",
rating: 6.9,
languages: "Italian, English",
subtitles: "German, French"
}, {
name: "The Transporter",
year: 2002,
genre: "Action, Crime, Thriller",
rating: 6.7,
languages: "English",
subtitles: "French, Japanese"
}, {
name: "High Voltage",
year: 2009,
genre: "Action, Comedy, Crime",
rating: 6.2,
languages: "English",
subtitles: "Spanish, Japanese"
}]
}, {
firstName: "Sandra",
lastName: "Bullock",
nationality: {key: "USA", value: "USA"},
movies: [{
name: "The Blind Side",
year: 2009,
genre: "Biography, Drama, Sport",
rating: 7.6,
languages: "English",
subtitles: "English, French"
}, {
name: "Murder by Numbers",
year: 2002,
genre: "Crime, Drama, Thriller",
rating: 5.9,
languages: "English",
subtitles: "English, Spanish"
}
]
}];