製品版のみの機能
グリッド - JsRender の結合
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
jsRender は、igGrid で有効可能なサード パーティー テンプレート化エンジンです。
このサンプルでは、グリッドの列テンプレートで jsRender の使用を紹介します。「名前」および「生年月日」列はコンテンツを処理するためにヘルパー関数を使用します。「言語」列は {{for ...}} の列挙タグを使用します。
コード ビュー
クリップボードへコピー
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2024.1/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/2024.1/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.lob.js"></script>
<script src="/js/external/jsrender.js" type="text/javascript"></script>
</head>
<body>
<table id="grid12"></table>
<!--Sample JSON Data-->
<script src="/data-files/nw-employees.js"></script>
<script>
$(function () {
var titles = ["Sales Representative", "Sales Manager", "Inside Sales Coordinator", "Vice President, Sales"];
var countries = ["UK", "USA"];
$.views.helpers(
{
toDate: function (val) {
return new Date(val);
}
});
$.views.helpers(
{
toFullName: function (val) {
var name = val.split(',').reverse().join(" ");
return name;
}
});
$("#grid12").igGrid({
width: "100%",
height: "600px",
autoGenerateColumns: false,
autoCommit:true,
columns: [
{ headerText: "社員 ID", key: "ID", dataType: "number" },
{ headerText: "名前", key: "Name", dataType: "string", template: "{{>#view.hlp('toFullName')(Name)}}" },
{
headerText: "画像", key: "ImageUrl", dataType: "object",
template: "<img width='100' height='90' src={{>ImageUrl}}></img>"
},
{ headerText: "役職", key: "Title", dataType: "string" },
{
headerText: "言語", key: "Languages", dataType: "object",
template: "{{for Languages}}<div>{{:name}}</div>{{/for}}"
},
{ headerText: "電話", key: "Phone", dataType: "string" },
{
headerText: "国名", key: "Country", dataType: "string",
template: "<img width='26' height='15' src='/images/samples/nw/countries/{{>Country}}.gif'></img> <span style='display: table-cell;vertical-align: middle;'>{{>Country}}</span>"
},
{
headerText: "生年月日", key: "BirthDate", dataType: "date",
template: "<span style='color:{{if #view.hlp('toDate')(BirthDate) > #view.hlp('toDate')('1980-01-01T00:00:00.000')}}#4573D6{{else}}#F75F4F{{/if}};'>{{>BirthDate}}</span>"
}
],
dataSource: northwindEmployees,
primaryKey: "ID",
templatingEngine: "jsrender",
features: [
{
name: 'Responsive',
enableVerticalRendering: false,
columnSettings: [
{
columnKey: 'ID',
classes: 'ui-hidden-phone'
},
{
columnKey: 'Phone',
classes: 'ui-hidden-phone'
},
{
columnKey: 'Name',
classes: 'ui-hidden-phone'
}
]
}
]
});
});
</script>
</body>
</html>
var northwindEmployees = [
{ "ID": 1, "Name": "サラ ヴィッテリ", "Title": "ソフトウェア エンジニア", "ImageUrl": "../../images/samples/nw/employees/1.png", "Phone": "(206) 555-9857", "PhoneUrl": "tel:(206) 555-9857", "BirthDate":"1948-12-08T00:00:00", "HireDate":"1992-05-01T00:00:00", "Country": "USA", "Languages": [{ name: "英語" }, { name: "ロシア語" }] },
{ "ID": 2, "Name": "デイビット グリーン", "Title": "最高技術責任者", "ImageUrl": "../../images/samples/nw/employees/2.png", "Phone": "(206) 555-9482", "PhoneUrl": "tel:(206) 555-9482", "BirthDate":"1952-02-19T00:00:00", "HireDate":"1992-08-14T00:00:00", "Country": "USA", "Languages": [{ name: "英語" }, { name: "ドイツ語" }] },
{ "ID": 3, "Name": "ジジ マッシュー", "Title": "ソフトウェア エンジニア", "ImageUrl": "../../images/samples/nw/employees/3.png", "Phone": "(206) 555-3412", "PhoneUrl": "tel:(206) 555-3412", "BirthDate":"1963-08-30T00:00:00Z", "HireDate":"1992-04-01T00:00:00Z", "Country": "USA", "Languages": [{ name: "英語" }] },
{ "ID": 4, "Name": "アリス カートマン", "Title": "ソフトウェア エンジニア", "ImageUrl": "../../images/samples/nw/employees/4.png", "Phone": "(206) 555-8122", "PhoneUrl": "tel:(206) 555-8122", "BirthDate":"1937-09-19T00:00:00Z","HireDate":"1993-05-03T00:00:00Z", "Country": "USA", "Languages": [{ name: "英語" }, { name: "スペイン語" }] },
{ "ID": 5, "Name": "マイケル ラファイエット", "Title": "システム開発 VP", "ImageUrl": "../../images/samples/nw/employees/5.png", "Phone": "(71) 555-4848", "PhoneUrl": "tel:(71) 555-4848", "BirthDate":"1955-03-04T00:00:00Z","HireDate":"1993-10-17T00:00:00Z", "Country": "UK", "Languages": [{ name: "英語" }, { name: "イタリア語" }] },
{ "ID": 6, "Name": "クリス ウィスルトン", "Title": "ソフトウェア エンジニア", "ImageUrl": "../../images/samples/nw/employees/6.png", "Phone": "(71) 555-7773", "PhoneUrl": "tel:(71) 555-7773", "BirthDate":"1963-07-02T00:00:00Z","HireDate":"1993-10-17T00:00:00Z", "Country": "UK", "Languages": [{ name: "英語" }, { name: "ポルトガル語" }] },
{ "ID": 7, "Name": "ジェームス オークビル", "Title": "ソフトウェア エンジニア", "ImageUrl": "../../images/samples/nw/employees/7.png", "Phone": "(71) 555-5598", "PhoneUrl": "tel:(71) 555-5598", "BirthDate":"1960-05-29T00:00:00Z","HireDate":"1994-01-02T00:00:00Z", "Country": "UK", "Languages": [{ name: "英語" }, { name: "フランス語" }, { name: "スペイン語" }] },
{ "ID": 8, "Name": "マーサ ブラウン", "Title": "システム アドミニストレーター", "ImageUrl": "../../images/samples/nw/employees/8.png", "Phone": "(206) 555-1189", "PhoneUrl": "tel:(206) 555-1189", "BirthDate":"1958-01-09T00:00:00Z","HireDate":"1994-03-05T00:00:00Z", "Country": "USA", "Languages": [{ name: "英語" }, { name: "中国語" }] },
{ "ID": 9, "Name": "サラ レクラー", "Title": "ソフトウェア エンジニア", "ImageUrl": "../../images/samples/nw/employees/9.png", "Phone": "(71) 555-4444", "PhoneUrl": "tel:(71) 555-4444", "BirthDate":"1966-01-27T00:00:00Z","HireDate":"1994-11-15T00:00:00Z", "Country": "UK", "Languages": [{ name: "英語" }, { name: "日本語" }] }
]