製品版のみの機能
グリッド - レスポンシブ単一列テンプレート
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
レスポンシブ単一列テンプレートを使用すると、行のデータを現在のレイアウト モード (タブレットまたは携帯) に基づいて単一列に描画するカスタム テンプレートを定義できます。
このオプションは、グリッドが小さいデバイスで描画される場合にデータのカスタム外観を作成できます。
さまざまなモードを表示するには、このサンプルをモバイル デバイスで開くか、ブラウザー ウィンドウをサイズ変更します。
コード ビュー
クリップボードへコピー
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.right {
height: 100%;
padding: 3px;
}
.right > span:nth-of-type(odd) {
font-weight: bold;
}
#grid1_responsiveAdaptive > div {
float: left;
width: 33%;
}
</style>
<!-- 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>
<!--Sample JSON Data-->
<script src="/data-files/nw-employees.js"></script>
</head>
<body>
<table id="grid1"></table>
<script>
$(function () {
$("#grid1").igGrid({
dataSource: northwindEmployees,
primaryKey: "ID",
width: "100%",
height: "500px",
autoGenerateColumns: false,
columns: [
{ headerText: "Employee ID", key: "ID", dataType: "number", hidden: true },
{ headerText: "Image", key: "ImageUrl", dataType: "string", template: "<img width='100' height='90' src='${ImageUrl}'></img>" },
{ headerText: "Name", key: "Name", dataType: "string" },
{ headerText: "Title", key: "Title", dataType: "string" },
{ headerText: "Phone", key: "Phone", dataType: "string" },
{ headerText: "Hire Date", key: "HireDate", dataType: "date" }
],
features: [
{
name: "Responsive",
enableVerticalRendering: false,
singleColumnTemplate: {
phone:
"<div style='float: left;'>" +
"<img width='100' height='90' src='${ImageUrl}'></img>" +
"</div>" +
"<div class='right' style='float: left; font-size: 1.1em;'>" +
"<span>Name: </span><span>${Name}</span><br/>" +
"<span>Title: </span><span>${Title}</span><br/>" +
"<span>Phone: </span><span><a href='${PhoneUrl}'>${Phone}</a></span><br/>" +
"<span>HireDate: </span><span>${HireDate}</span><br/>" +
"</div>",
tablet:
"<div style='float: left;'>" +
"<img width='100' height='90' src='${ImageUrl}'></img>" +
"</div>" +
"<div class='right' style='float: left; font-size: 0.9em;'>" +
"<span>Name: </span><span>${Name}</span><br/>" +
"<span>Title: </span><span>${Title}</span><br/>" +
"<span>Phone: </span><span><a href='${PhoneUrl}'>${Phone}</a></span><br/>" +
"<span>HireDate: </span><span>${HireDate}</span><br/>" +
"</div>"
}
}
]
});
});
</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: "日本語" }] }
]