OSS で利用できる機能
テンプレート エンジン - TypeScript との連携
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
このサンプルは、TypeScript で Infragistics テンプレート エンジンを使用してネストされたテンプレートを使用する方法を紹介します。
この例では、各アクターの映画コレクションは繰り返され、映画データはツリーで表示されます。
コード ビュー
クリップボードへコピー
<!DOCTYPE html>
<html>
<head>
<title></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>
<style type="text/css">
.clear {
clear: both;
}
.ui-igrating {
float: left;
}
.ratingLabel {
float: left;
margin-left: 3px;
margin-right: 5px;
}
.delete-button
{
width: 100%;
font-size: 1em;
border: solid 1px #777;
font-family: 'Segoe UI', Arial, sans-serif;
color: #444;
}
.delete-button:hover
{
background-color: #d0edfa;
}
</style>
</head>
<body>
<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>
<div id="resultGrid"></div>
<script src="/TypeScriptSamples/templating-engine/typescript.js"></script>
</body>
</html>
/// <reference path="/js/typings/jquery.d.ts" />
/// <reference path="/js/typings/jqueryui.d.ts" />
/// <reference path="/js/typings/igniteui.d.ts" />
//Classes
class Movie {
name: string;
year: number;
genre: string;
rating: number;
languages: string;
subtitles: string;
constructor(inName: string, inYear: number, inGenre: string, inRating: number, inLanguage: string, inSubs: string) {
this.name = inName;
this.year = inYear;
this.genre = inGenre;
this.rating = inRating;
this.languages = inLanguage;
this.subtitles = inSubs;
}
}
class Actor {
firstName: string;
lastName: string;
nationality: Object;
movies: Movie[];
constructor(inFirstName: string, inLastName: string, inNationality: Object, inMoviesArray: Movie[]) {
this.firstName = inFirstName;
this.lastName = inLastName;
this.nationality = inNationality;
this.movies = inMoviesArray;
}
}
//Data setup
var moviesDWashington: Movie[] = [];
moviesDWashington.push(new Movie("American Gangster", 2007, "Biography, Crime, Drama", 7.9, "English, German", "Japanese, English"));
moviesDWashington.push(new Movie("Man on Fire", 2004, "Crime, Drama, Thriller", 7.7, "English, Japanese", "English, Indian"));
moviesDWashington.push(new Movie("Out of Time", 2003, "Crime, Drama, Thriller", 6.5, "English", "English, Japanese"));
moviesDWashington.push(new Movie("Training Day", 2001, "Crime, Drama, Thriller", 7.6, "English", "English, German"));
var moviesAJolie: Movie[] = [];
moviesAJolie.push(new Movie("In the Land of Blood and Honey", 2011, "Drama, Romance, War", 3.2, "English", "English, French"));
moviesAJolie.push(new Movie("Kung Fu Panda 2", 2011, "Animation, Action, Adventure", 7.4, "English, Japanese", "Spanish, French"));
moviesAJolie.push(new Movie("The Tourist", 2010, "Action, Mistery, Romance", 5.9, "English", "Spanish, Swedish"));
var moviesPCruz: Movie[] = [];
moviesPCruz.push(new Movie("Sahara", 2005, "Action, Adventure, Comedy", 5.9, "English, Spanish", "Japanese, French"));
moviesPCruz.push(new Movie("Vanilla Sky", 2001, "Mystery, Romance, Sci-Fi", 5.9, "Spanish", "English, Japanese"));
var moviesGClooney: Movie[] = [];
moviesGClooney.push(new Movie("Ocean's Thirteen", 2007, "Crime, Thriller", 6.9, "English", "Spanish, French"));
moviesGClooney.push(new Movie("Syriana", 2005, "Drama, Thriller", 7.0, "English", "French, Japanese"));
moviesGClooney.push(new Movie("Good Night, and Good Luck", 2005, "Drama, History", 7.6, "English, German", "German, Japanese"));
var moviesJRoberts: Movie[] = [];
moviesJRoberts.push(new Movie("Eat Pray Love", 2010, "Drama, Romance", 5.3, "English, German", "Spanish, French"));
moviesJRoberts.push(new Movie("Notting Hill", 1999, "Comedy, Romance", 6.9, "English", "English, Indian"));
var actors: Actor[] = [];
actors.push(new Actor("Denzel", "Washington", { key: "USA", value: "USA" }, moviesDWashington));
actors.push(new Actor("Angelina", "Jolie", { key: "USA", value: "USA" }, moviesAJolie));
actors.push(new Actor("Penelope", "Cruz", { key: "Spain", value: "Spain" }, moviesPCruz));
actors.push(new Actor("George", "Clooney", { key: "USA", value: "USA" }, moviesGClooney));
actors.push(new Actor("Julia", "Roberts", { key: "USA", value: "USA" }, moviesJRoberts));
$(function () {
var i = 0, currentValue, limit,
imagesRoot = "https://www.igniteui.com/images/samples/templating-engine/multiConditionalColTemplate";
$("#resultGrid").igGrid({
dataSource: actors,
width: "100%",
autoGenerateColumns: false,
columns: [
{ headerText: "名前", key: "firstName", width: 100 },
{ headerText: "名字", key: "lastName", width: 200 },
{ headerText: "国", key: "nationality", width: 100, template: "<img width='20' height='15' src='" + imagesRoot + "/${nationality.key}.gif' /> ${nationality.value} " },
{ headerText: "映画", key: "movies", width: 500, template: $("#colTmpl").html() },
],
rendered: function () {
initializeInnerControls();
},
features: [
{
name: "Paging",
type: "local",
pageSize: 3,
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"
});
}
}
});