OSS で利用できる機能
コンボ ボックス - グループ化
このサンプルは、igCombo コントロールのグループ化機能を紹介します。
このサンプルは 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/structure/infragistics.css" rel="stylesheet" />
<link type="text/css" href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/metro/infragistics.theme.css" rel="stylesheet" />
<link type="text/css" href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/modules/infragistics.ui.shared.css" rel="stylesheet" />
<link type="text/css" href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/modules/infragistics.ui.combo.css" rel="stylesheet" />
<link type="text/css" href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/modules/infragistics.ui.validator.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>
<!-- Bootstrap tooltips require Tether -->
<script src="/js/external/tether.min.js"></script>
<script src="/data-files/Customers.js"></script>
<style>
.dropdown-menu {
list-style-type: none;
}
#test {
position: absolute;
margin-left: 100px;
margin-top: 50px;
top: 33px;
left: 135px;
}
body {
font-size: 14px;
}
</style>
</head>
<body>
<div id='combo'></div>
<br>
<script type="text/javascript">
$(function () {
ApplyStyle()
});
$('#combo').igCombo({
dataSource: data,
closeDropDownOnBlur: false,
width: "250px",
textKey: 'name',
valueKey: 'id',
grouping: {
key: 'state',
dir: 'desc'
},
headerTemplate: "<div style='text-align:center;'><table style='width: 100%; background-color: #c0c0c0'>" +
"<tr>" +
"<td colspan='2' style='text-align:center'> </td>" +
"</tr>" +
"<tr>" +
"<td colspan='2'>" +
"<div class='btn-group' role='group' aria-label='...'>" +
"<div class='btn-group' role='group'>" +
"<button type='button' class='btn btn-secondary dropdown-toggle' data-toggle='dropdown' aria-expanded='false'>" +
"グループ化" +
"<span class='caret'></span>" +
"</button>" +
"<ul class='dropdown-menu' role='menu'>" +
"<li><a class='dropdown-item' href='#' onclick='GroupBy(\"state\")'>州</a></li>" +
"<li><a class='dropdown-item' href='#' onclick='GroupBy(\"division\")'>地域</a></li>" +
"</ul>" +
"</div>" +
"<button type='button' class='btn btn-secondary' onclick='ChangeDirection()'>順序を変更</button>" +
"</div>" +
"</div>" +
"</td>" +
"</tr>" +
"<tr><td colspan='2'> </tr>" +
"</table></div>",
footerTemplate: "<div style='text-align:center; background-color: #c0c0c0'>顧客 [{0}]</div>"
});
function GroupBy(key) {
$("#combo").igCombo("option", "grouping", { key: key, dir: "asc" });
$("#combo").igCombo("dataBind");
ApplyStyle();
}
function ChangeDirection() {
var gr = $("#combo").igCombo("option", "grouping");
if (gr.dir === "desc") {
gr.dir = "asc";
} else {
gr.dir = "desc";
}
$("#combo").igCombo("option", "grouping", gr);
$("#combo").igCombo("dataBind");
ApplyStyle();
}
function ApplyStyle() {
$('li.ui-igcombo-group-header').css({
'color' : '#00AADE',
'font-weight' : 'bold'
});
}
</script>
</body>
</html>
var data = [{ "id": 0,
"division": "East",
"name": "Russ Martin",
"address": "MT,VT, NH, ME (all firms)",
"state": "MT",
"coordinates": "43.299428,-74.217933",
}, { "id": 1,
"division": "East",
"name": "Carey Fischer",
"address": "NY- Upstate ex Rockland County (BD, FP)",
"state": "NY",
"coordinates": "46.879682,-110.362566"
}, { "id": 2,
"division": "East",
"name": "Brandon Born",
"address": "CT, NY - Upstate, MA - ex metro Boston (FI), MA - Central, West (all firms)",
"state": "CT",
"coordinates": "40.714353,-74.005973"
}, { "id": 3,
"division": "East",
"name": "Joe Tocyloski",
"address": "PA - East, NJ - South (FP)",
"state": "PA",
"coordinates": "41.603221,-73.087749"
}, { "id": 4,
"division": "East",
"name": "Phil Hemery",
"address": "NJ (FI), NJ - Bergen County (all firms), NY - NYC (FI,RIA)/Westchester (FI,BD)/Rockland County (all firms)",
"state": "NJ",
"coordinates": "41.203456,-77.189941"
}, { "id": 5,
"division": "East",
"name": "Bob Mancini",
"address": "MA - East (all firms)",
"state": "MA",
"coordinates": "42.407235,-71.383667"
}, { "id": 6,
"division": "East",
"name": "Damien Ramondo",
"address": "NJ, PA East",
"state": "NJ",
"coordinates": "41.203456,-77.189941"
}, { "id": 7,
"division": "West",
"name": "Kevin Gang",
"address": "W VA,PA - West (all firms), OH - Cleveland (BD, FI)",
"state": "VA",
"coordinates": "44.314844,-85.602364"
}, { "id": 8,
"division": "West",
"name": "Andrew Fischer",
"address": "MI - (all firms)",
"state": "MI",
"coordinates": "40.057052,-74.404907"
}, { "id": 9,
"division": "East",
"name": "David Saslowsky",
"address": "NYC",
"state": "NY",
"coordinates": "46.879682,-110.362566"
}, { "id": 10,
"division": "East",
"name": "Robert Brazofsky",
"address": "NYC",
"state": "NY",
"coordinates": "46.879682,-110.362566"
}, { "id": 11,
"division": "West",
"name": "Joseph Proscia",
"address": "NJ - North ex Bergen County, NY - NYC (FP)",
"state": "NJ",
"coordinates": "41.203456,-77.189941"
}, {
"id": 12,
"division": "West",
"name": "Niki Proscia",
"address": "NJ - North ex Bergen County, NY - NYC (FP)",
"state": "NJ",
"coordinates": "41.203456,-77.189941"
}, {
"id": 13,
"division": "East",
"name": "Matt Proscia",
"address": "NJ - North ex Bergen County, NY - NYC (FP)",
"state": "NJ",
"coordinates": "41.203456,-77.189941"
}, {
"id": 14,
"division": "East",
"name": "Nate Proscia",
"address": "NJ - North ex Bergen County, NY - NYC (FP)",
"state": "NJ",
"coordinates": "41.203456,-77.189941"
}, {
"id": 15,
"division": "West",
"name": "Ralf Proscia",
"address": "NJ - North ex Bergen County, NY - NYC (FP)",
"state": "NJ",
"coordinates": "41.203456,-77.189941"
}, {
"id": 16,
"division": "West",
"name": "Proscia Joseph",
"address": "NJ - North ex Bergen County, NY - NYC (FP)",
"state": "NJ",
"coordinates": "41.203456,-77.189941"
}];