製品版のみの機能
グリッド - 縮小可能な列
縮小可能な列グループは複数列ヘッダー機能の一部で、列グループをより小さいデータ セットに縮小/展開する方法を提供します。このサンプルは 3 つの縮小可能なグループを持つ複数列ヘッダーの列があります。「会社情報」および「電話情報」は 2 つのレベルがあり、「連絡先情報」は 3 つのレベルがあります。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
コード ビュー
クリップボードへコピー
<!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>
<script id="colTmpl" type="text/template">
{{if ${ContactTitle} === "Sales Representative" }}
<div class='blueCell'>${ContactTitle}</div>
{{elseif ${ContactTitle} === "Owner"}}
<div class='redCell'>${ContactTitle}</div>
{{else}}
<div class='greenCell'>${ContactTitle}</div>
{{/if}}
</script>
<script id="colTmpl1" type="text/template">
{{if ${ContactTitle} === "Sales Representative" }}
<div class='blueCell'>${Phone}</div>
{{elseif ${ContactTitle} === "Owner"}}
<div class='redCell'>${Phone}</div>
{{else}}
<div class='greenCell'>${Phone}</div>
{{/if}}
</script>
</head>
<body>
<table id="grid1"></table>
<script src="/data-files/nw-customers.js"></script>
<script>
function colorizeColumn(cellClass, color) {
$("." + cellClass + "Cell").css("color", color);
}
$(function () {
$("#grid1").igGrid({
width: "100%",
height: "500px",
autoGenerateColumns: false,
dataSource: nwCustomers,
responseDataKey: "results",
rowsRendered: function(evt, ui) {
colorizeColumn("blue", "#0234d7");
colorizeColumn("green", "#0e9d5f");
colorizeColumn("red", "#ff6a00");
},
columns: [
{
headerText: "会社情報",
group: [
{
headerText: "会社名",
key: "CompanyName",
dataType: "string",
width: "150px"
},
{
headerText: "名前",
key: "ContactName",
dataType: "string",
width: "150px",
groupOptions: {
hidden: "parentcollapsed"
}
},
{
headerText: "連絡先",
key: "ContactTitle",
dataType: "string",
width: "200px",
template: $( "#colTmpl" ).html(),
groupOptions: {
hidden: "parentcollapsed"
}
}
],
groupOptions: {
expanded: true,
allowGroupCollapsing: true
}
},
{
headerText: "アドレス情報",
group: [
{
headerText: "住所",
group: [
{
headerText: "住所",
key: "Address",
dataType: "string",
width: "150px"
},
{
headerText: "市",
key: "City",
dataType: "string",
width: "100px",
groupOptions: {
hidden: "parentcollapsed"
}
}
],
groupOptions: {
expanded: true,
allowGroupCollapsing: true,
hidden: "parentcollapsed"
}
},
{
headerText: "郵便番号",
key: "PostalCode",
dataType: "string",
width: "100px",
groupOptions: {
hidden: "parentcollapsed"
}
},
{
headerText: "フルアドレス",
width: "200px",
key: "FullAddress",
dataType: "string",
unbound: true,
formula: function (data, grid) {
return data["Address"] + ", " + data["City"];
},
groupOptions: {
hidden: "parentexpanded"
}
}
],
groupOptions: {
expanded: true,
allowGroupCollapsing: true
}
},
{
headerText: "電話情報",
group: [
{ headerText: "電話", key: "Phone", dataType: "string", width: "150px", template: $("#colTmpl1").html() },
{
headerText: "FAX",
key: "Fax",
dataType: "string",
width: "150px",
groupOptions: {
hidden: "parentcollapsed"
}
}
],
groupOptions: {
expanded: true,
allowGroupCollapsing: true
}
}
],
features: [
{
name: 'MultiColumnHeaders'
},
{
name: 'Responsive',
enableVerticalRendering: false,
columnSettings: [
{
columnKey: 'CustomerID',
classes: 'ui-hidden-phone ui-hidden-tablet'
}
]
},
{
name: "ColumnMoving"
},
{
name: "Sorting"
}
]
});
});
</script>
</body>
</html>
var nwCustomers = {
"results": [{
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('ALFKI')",
"type": "NorthwindModel.Customer"
},
"CustomerID": "ALFKI",
"CompanyName": "Alfreds Futterkiste",
"ContactName": "Maria Anders",
"ContactTitle": "Sales Representative",
"Address": "Obere Str. 57",
"City": "Berlin",
"Region": null,
"PostalCode": "12209",
"Country": "Germany",
"Phone": "030-0074321",
"Fax": "030-0076545",
"Orders": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('ALFKI')/Orders"
}
},
"CustomerDemographics": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('ALFKI')/CustomerDemographics"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('ANATR')",
"type": "NorthwindModel.Customer"
},
"CustomerID": "ANATR",
"CompanyName": "Ana Trujillo Emparedados y helados",
"ContactName": "Ana Trujillo",
"ContactTitle": "Owner",
"Address": "Avda. de la Constituci\u00f3n 2222",
"City": "M\u00e9xico D.F.",
"Region": null,
"PostalCode": "05021",
"Country": "Mexico",
"Phone": "(5) 555-4729",
"Fax": "(5) 555-3745",
"Orders": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('ANATR')/Orders"
}
},
"CustomerDemographics": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('ANATR')/CustomerDemographics"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('ANTON')",
"type": "NorthwindModel.Customer"
},
"CustomerID": "ANTON",
"CompanyName": "Antonio Moreno Taquer\u00eda",
"ContactName": "Antonio Moreno",
"ContactTitle": "Owner",
"Address": "Mataderos 2312",
"City": "M\u00e9xico D.F.",
"Region": null,
"PostalCode": "05023",
"Country": "Mexico",
"Phone": "(5) 555-3932",
"Fax": null,
"Orders": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('ANTON')/Orders"
}
},
"CustomerDemographics": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('ANTON')/CustomerDemographics"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('AROUT')",
"type": "NorthwindModel.Customer"
},
"CustomerID": "AROUT",
"CompanyName": "Around the Horn",
"ContactName": "Thomas Hardy",
"ContactTitle": "Sales Representative",
"Address": "120 Hanover Sq.",
"City": "London",
"Region": null,
"PostalCode": "WA1 1DP",
"Country": "UK",
"Phone": "(171) 555-7788",
"Fax": "(171) 555-6750",
"Orders": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('AROUT')/Orders"
}
},
"CustomerDemographics": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('AROUT')/CustomerDemographics"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('BERGS')",
"type": "NorthwindModel.Customer"
},
"CustomerID": "BERGS",
"CompanyName": "Berglunds snabbk\u00f6p",
"ContactName": "Christina Berglund",
"ContactTitle": "Order Administrator",
"Address": "Berguvsv\u00e4gen 8",
"City": "Lule\u00e5",
"Region": null,
"PostalCode": "S-958 22",
"Country": "Sweden",
"Phone": "0921-12 34 65",
"Fax": "0921-12 34 67",
"Orders": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('BERGS')/Orders"
}
},
"CustomerDemographics": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('BERGS')/CustomerDemographics"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('BLAUS')",
"type": "NorthwindModel.Customer"
},
"CustomerID": "BLAUS",
"CompanyName": "Blauer See Delikatessen",
"ContactName": "Hanna Moos",
"ContactTitle": "Sales Representative",
"Address": "Forsterstr. 57",
"City": "Mannheim",
"Region": null,
"PostalCode": "68306",
"Country": "Germany",
"Phone": "0621-08460",
"Fax": "0621-08924",
"Orders": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('BLAUS')/Orders"
}
},
"CustomerDemographics": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('BLAUS')/CustomerDemographics"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('BLONP')",
"type": "NorthwindModel.Customer"
},
"CustomerID": "BLONP",
"CompanyName": "Blondesddsl p\u00e8re et fils",
"ContactName": "Fr\u00e9d\u00e9rique Citeaux",
"ContactTitle": "Marketing Manager",
"Address": "24, place Kl\u00e9ber",
"City": "Strasbourg",
"Region": null,
"PostalCode": "67000",
"Country": "France",
"Phone": "88.60.15.31",
"Fax": "88.60.15.32",
"Orders": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('BLONP')/Orders"
}
},
"CustomerDemographics": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('BLONP')/CustomerDemographics"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('BOLID')",
"type": "NorthwindModel.Customer"
},
"CustomerID": "BOLID",
"CompanyName": "B\u00f3lido Comidas preparadas",
"ContactName": "Mart\u00edn Sommer",
"ContactTitle": "Owner",
"Address": "C/ Araquil, 67",
"City": "Madrid",
"Region": null,
"PostalCode": "28023",
"Country": "Spain",
"Phone": "(91) 555 22 82",
"Fax": "(91) 555 91 99",
"Orders": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('BOLID')/Orders"
}
},
"CustomerDemographics": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('BOLID')/CustomerDemographics"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('BONAP')",
"type": "NorthwindModel.Customer"
},
"CustomerID": "BONAP",
"CompanyName": "Bon app'",
"ContactName": "Laurence Lebihan",
"ContactTitle": "Owner",
"Address": "12, rue des Bouchers",
"City": "Marseille",
"Region": null,
"PostalCode": "13008",
"Country": "France",
"Phone": "91.24.45.40",
"Fax": "91.24.45.41",
"Orders": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('BONAP')/Orders"
}
},
"CustomerDemographics": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('BONAP')/CustomerDemographics"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('BOTTM')",
"type": "NorthwindModel.Customer"
},
"CustomerID": "BOTTM",
"CompanyName": "Bottom-Dollar Markets",
"ContactName": "Elizabeth Lincoln",
"ContactTitle": "Accounting Manager",
"Address": "23 Tsawassen Blvd.",
"City": "Tsawassen",
"Region": "BC",
"PostalCode": "T2F 8M4",
"Country": "Canada",
"Phone": "(604) 555-4729",
"Fax": "(604) 555-3745",
"Orders": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('BOTTM')/Orders"
}
},
"CustomerDemographics": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('BOTTM')/CustomerDemographics"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('BSBEV')",
"type": "NorthwindModel.Customer"
},
"CustomerID": "BSBEV",
"CompanyName": "B's Beverages",
"ContactName": "Victoria Ashworth",
"ContactTitle": "Sales Representative",
"Address": "Fauntleroy Circus",
"City": "London",
"Region": null,
"PostalCode": "EC2 5NT",
"Country": "UK",
"Phone": "(171) 555-1212",
"Fax": null,
"Orders": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('BSBEV')/Orders"
}
},
"CustomerDemographics": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('BSBEV')/CustomerDemographics"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('CACTU')",
"type": "NorthwindModel.Customer"
},
"CustomerID": "CACTU",
"CompanyName": "Cactus Comidas para llevar",
"ContactName": "Patricio Simpson",
"ContactTitle": "Sales Agent",
"Address": "Cerrito 333",
"City": "Buenos Aires",
"Region": null,
"PostalCode": "1010",
"Country": "Argentina",
"Phone": "(1) 135-5555",
"Fax": "(1) 135-4892",
"Orders": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('CACTU')/Orders"
}
},
"CustomerDemographics": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('CACTU')/CustomerDemographics"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('CENTC')",
"type": "NorthwindModel.Customer"
},
"CustomerID": "CENTC",
"CompanyName": "Centro comercial Moctezuma",
"ContactName": "Francisco Chang",
"ContactTitle": "Marketing Manager",
"Address": "Sierras de Granada 9993",
"City": "M\u00e9xico D.F.",
"Region": null,
"PostalCode": "05022",
"Country": "Mexico",
"Phone": "(5) 555-3392",
"Fax": "(5) 555-7293",
"Orders": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('CENTC')/Orders"
}
},
"CustomerDemographics": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('CENTC')/CustomerDemographics"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('CHOPS')",
"type": "NorthwindModel.Customer"
},
"CustomerID": "CHOPS",
"CompanyName": "Chop-suey Chinese",
"ContactName": "Yang Wang",
"ContactTitle": "Owner",
"Address": "Hauptstr. 29",
"City": "Bern",
"Region": null,
"PostalCode": "3012",
"Country": "Switzerland",
"Phone": "0452-076545",
"Fax": null,
"Orders": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('CHOPS')/Orders"
}
},
"CustomerDemographics": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('CHOPS')/CustomerDemographics"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('COMMI')",
"type": "NorthwindModel.Customer"
},
"CustomerID": "COMMI",
"CompanyName": "Com\u00e9rcio Mineiro",
"ContactName": "Pedro Afonso",
"ContactTitle": "Sales Associate",
"Address": "Av. dos Lus\u00edadas, 23",
"City": "Sao Paulo",
"Region": "SP",
"PostalCode": "05432-043",
"Country": "Brazil",
"Phone": "(11) 555-7647",
"Fax": null,
"Orders": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('COMMI')/Orders"
}
},
"CustomerDemographics": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('COMMI')/CustomerDemographics"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('CONSH')",
"type": "NorthwindModel.Customer"
},
"CustomerID": "CONSH",
"CompanyName": "Consolidated Holdings",
"ContactName": "Elizabeth Brown",
"ContactTitle": "Sales Representative",
"Address": "Berkeley Gardens 12 Brewery",
"City": "London",
"Region": null,
"PostalCode": "WX1 6LT",
"Country": "UK",
"Phone": "(171) 555-2282",
"Fax": "(171) 555-9199",
"Orders": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('CONSH')/Orders"
}
},
"CustomerDemographics": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('CONSH')/CustomerDemographics"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('DRACD')",
"type": "NorthwindModel.Customer"
},
"CustomerID": "DRACD",
"CompanyName": "Drachenblut Delikatessen",
"ContactName": "Sven Ottlieb",
"ContactTitle": "Order Administrator",
"Address": "Walserweg 21",
"City": "Aachen",
"Region": null,
"PostalCode": "52066",
"Country": "Germany",
"Phone": "0241-039123",
"Fax": "0241-059428",
"Orders": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('DRACD')/Orders"
}
},
"CustomerDemographics": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('DRACD')/CustomerDemographics"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('DUMON')",
"type": "NorthwindModel.Customer"
},
"CustomerID": "DUMON",
"CompanyName": "Du monde entier",
"ContactName": "Janine Labrune",
"ContactTitle": "Owner",
"Address": "67, rue des Cinquante Otages",
"City": "Nantes",
"Region": null,
"PostalCode": "44000",
"Country": "France",
"Phone": "40.67.88.88",
"Fax": "40.67.89.89",
"Orders": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('DUMON')/Orders"
}
},
"CustomerDemographics": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('DUMON')/CustomerDemographics"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('EASTC')",
"type": "NorthwindModel.Customer"
},
"CustomerID": "EASTC",
"CompanyName": "Eastern Connection",
"ContactName": "Ann Devon",
"ContactTitle": "Sales Agent",
"Address": "35 King George",
"City": "London",
"Region": null,
"PostalCode": "WX3 6FW",
"Country": "UK",
"Phone": "(171) 555-0297",
"Fax": "(171) 555-3373",
"Orders": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('EASTC')/Orders"
}
},
"CustomerDemographics": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('EASTC')/CustomerDemographics"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('ERNSH')",
"type": "NorthwindModel.Customer"
},
"CustomerID": "ERNSH",
"CompanyName": "Ernst Handel",
"ContactName": "Roland Mendel",
"ContactTitle": "Sales Manager",
"Address": "Kirchgasse 6",
"City": "Graz",
"Region": null,
"PostalCode": "8010",
"Country": "Austria",
"Phone": "7675-3425",
"Fax": "7675-3426",
"Orders": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('ERNSH')/Orders"
}
},
"CustomerDemographics": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Customers('ERNSH')/CustomerDemographics"
}
}
}]
};