製品版のみの機能

グリッド - GroupBy

このサンプルでは、igGrid コントロールのグループ化機能を紹介します。列をグループ化するには、各列のインジケータを上部のグループ化領域にドラッグします。
グループ化するには、列をここへドラッグするか、列を選択します。
  • 配送先の国
配送先の国
注文日
出荷名
配送先市町村
顧客住所
単価
割引
 
配送先の国: Argentina (3) 注文日 After 8/1/1996: 2001/03/01
Argentina1997/04/29Cactus Comidas para llevarBuenos AiresBuenos Aires12.50
Argentina1998/04/28Cactus Comidas para llevarBuenos AiresBuenos Aires2.50
Argentina1998/04/28Cactus Comidas para llevarBuenos AiresBuenos Aires140
Sum = 29
Sum = 0
配送先の国: Austria (102) 注文日 After 8/1/1996: 1995/01/01
Austria1996/07/23Ernst HandelGrazGraz3.60
Austria1996/11/11Ernst HandelGrazGraz7.70
Austria1996/11/29Ernst HandelGrazGraz15.60
Austria1996/12/13Ernst HandelGrazGraz170
Austria1996/12/13Ernst HandelGrazGraz500
Austria1996/12/13Ernst HandelGrazGraz990
Austria1996/12/13Ernst HandelGrazGraz20
Austria1996/12/13Ernst HandelGrazGraz80
Austria1996/12/23Ernst HandelGrazGraz9.60
Austria1997/01/02Ernst HandelGrazGraz7.20
Austria1997/01/02Ernst HandelGrazGraz35.10
Austria1997/01/30Ernst HandelGrazGraz80
Austria1997/01/30Ernst HandelGrazGraz30.40
Austria1997/02/11Ernst HandelGrazGraz16.80
Austria1997/02/11Ernst HandelGrazGraz5.90
Austria1997/02/11Ernst HandelGrazGraz13.60
Austria1997/04/22Ernst HandelGrazGraz810
Austria1997/04/22Ernst HandelGrazGraz45.60
Austria1997/04/22Ernst HandelGrazGraz380
Austria1997/04/22Ernst HandelGrazGraz21.050
Austria1997/04/22Ernst HandelGrazGraz7.750
Austria1997/10/09Ernst HandelGrazGraz210
Austria1997/12/10Ernst HandelGrazGraz21.50
Austria1997/12/11Ernst HandelGrazGraz390
Austria1997/12/24Ernst HandelGrazGraz17.450
Austria1998/01/16Ernst HandelGrazGraz210
Austria1998/01/16Ernst HandelGrazGraz180
Austria1998/01/16Ernst HandelGrazGraz19.50
Austria1998/01/16Ernst HandelGrazGraz340
Austria1998/01/16Ernst HandelGrazGraz33.250
Austria1998/02/18Ernst HandelGrazGraz4.50
Austria1998/02/18Ernst HandelGrazGraz180
Austria1998/02/18Ernst HandelGrazGraz18.40
Austria1998/02/18Ernst HandelGrazGraz340
Austria1998/03/23Ernst HandelGrazGraz380
Austria1998/03/23Ernst HandelGrazGraz4.50
Austria1998/03/23Ernst HandelGrazGraz33.250
Austria1998/03/26Ernst HandelGrazGraz300
Austria1998/03/26Ernst HandelGrazGraz380
Austria1998/03/26Ernst HandelGrazGraz4.50
Austria1998/03/26Ernst HandelGrazGraz43.90
Austria1998/03/26Ernst HandelGrazGraz12.50
Austria1998/03/26Ernst HandelGrazGraz43.90
Austria1998/04/01Ernst HandelGrazGraz100
Austria1998/04/08Ernst HandelGrazGraz21.50
Austria1998/04/13Ernst HandelGrazGraz100
Austria1998/04/13Ernst HandelGrazGraz550
Austria1998/04/13Ernst HandelGrazGraz150
Austria1998/05/05Ernst HandelGrazGraz190
Austria1998/05/05Ernst HandelGrazGraz9.650
Austria1998/05/05Ernst HandelGrazGraz16.250
Austria1998/05/05Ernst HandelGrazGraz33.250
Austria1996/11/11Ernst HandelGrazGraz210.80.05
Austria1996/11/11Ernst HandelGrazGraz15.50.05
Austria1996/11/11Ernst HandelGrazGraz16.80.05
Austria1997/10/09Ernst HandelGrazGraz390.05
Austria1997/10/09Ernst HandelGrazGraz123.790.05
Austria1997/10/09Ernst HandelGrazGraz21.050.05
Austria1997/10/09Ernst HandelGrazGraz150.05
Austria1997/12/15Ernst HandelGrazGraz12.50.05
Austria1997/12/15Ernst HandelGrazGraz140.05
Austria1997/12/15Ernst HandelGrazGraz9.50.05
Austria1997/12/15Ernst HandelGrazGraz530.05
Austria1998/04/08Ernst HandelGrazGraz45.60.05
Austria1998/04/08Ernst HandelGrazGraz140.05
Austria1996/11/29Ernst HandelGrazGraz80.1
Austria1996/11/29Ernst HandelGrazGraz36.40.1
Austria1996/11/29Ernst HandelGrazGraz26.60.1
Austria1996/12/23Ernst HandelGrazGraz100.1
Austria1996/12/23Ernst HandelGrazGraz14.40.1
Austria1996/12/23Ernst HandelGrazGraz27.80.1
Austria1997/12/03Ernst HandelGrazGraz100.1
Austria1997/12/03Ernst HandelGrazGraz180.1
Austria1997/01/03Ernst HandelGrazGraz13.90.15
Austria1997/01/03Ernst HandelGrazGraz10.20.15
Austria1997/06/17Ernst HandelGrazGraz23.250.15
Austria1997/06/17Ernst HandelGrazGraz140.15
Austria1997/08/15Ernst HandelGrazGraz380.15
Austria1997/08/15Ernst HandelGrazGraz60.15
Austria1997/08/15Ernst HandelGrazGraz31.230.15
Austria1997/08/15Ernst HandelGrazGraz49.30.15
Austria1998/01/27Ernst HandelGrazGraz310.15
Austria1998/01/27Ernst HandelGrazGraz60.15

このサンプルは、より大きい画面サイズのためにデザインされました。

モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。

columnSettings オプションを使用すると、列によって最初のグループ化を構成できます。各グループ行には、グループについてのカスタム情報 (集計) も含めることができます。たとえばこのサンプルでは、グループ行には、グループごとに 8/1/1996 の後にされた注文の数が表示されます。 グループ化が実行した後、initialExpand オプションはグループの展開を制御します。デフォルトでグループ化された列は、昇順で並べ替えています。グループ化された列インジケータをクリックして並べ替え順序を変更します。列のグループ化を解除するには、グループ化された列のインジケーターの X アイコンをクリックします。

コード ビュー

クリップボードへコピー 
<!DOCTYPE html>
<html>
<head>
	<title></title>

	<!-- Ignite UI for jQuery Required Combined CSS Files -->
	<link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
	<link href="http://cdn-na.infragistics.com/igniteui/2024.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/2024.2/latest/js/infragistics.core.js"></script>
	<script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.lob.js"></script>
</head>
<body>
	<table id="grid"></table>
	<script src="/data-files/nw-invoices.js"></script>
	<script>
		$(function () {
			$("#grid").igGrid({
				autoGenerateColumns: false,
				width: "100%",
				height: "500px",
			    rowVirtualization: true,
			    virtualizationMode: "continuous",
				columns: [
					{ headerText: "注文 ID", key: "OrderID", dataType: "number", width: "0%", hidden: true },
					{ headerText: "配送先の国", key: "ShipCountry", dataType: "string", width: "12%" },
					{ headerText: "注文日", key: "OrderDate", dataType: "date", width: "18%" },
					{ headerText: "出荷名", key: "ShipName", dataType: "string", width: "14%" },
					{ headerText: "配送先市町村", key: "ShipCity", dataType: "string", width: "13%" },
					{ headerText: "顧客住所", key: "City", dataType: "string", width: "13%" },
					{ headerText: "単価", key: "UnitPrice", dataType: "number", width: "17%" },
					{ headerText: "割引", key: "Discount", dataType: "number", width: "13%" },
				],
				dataSource: northwindInvoices,
				features: [
					{
						name: 'GroupBy',
						groupByDialogContainment: "window",
						groupSummaries: [
							{
								summaryFunction: "Sum", label: "Sum = ", format: ".##"
							}
						],
						columnSettings: [
							{
								columnKey: "ShipCountry",
								isGroupBy: true
							},
							{
								columnKey: "OrderDate",
								summaries: [
									{
										summaryFunction: "custom",
										text: "After 8/1/1996:",
										customSummary: function (data) {
											var count = 0, date = new Date(1996, 7, 1);
											$.map(data.array, function (d) {
												if (d > date) {
													count++;
												}
											});
											return count.toFixed(0);
										}
									}
								]
							}
						],
						summarySettings: {
							summaryFormat: "#"
						}
					},
					{
						name: "Filtering"
					},
					{
						name: "CellMerging"
					}
				]
			});
		});
	</script>
</body>
</html>