製品版のみの機能

階層グリッド - 選択

このサンプルでは、igHierarchicalGrid の選択および行セレクター機能を紹介します。

単一のセル選択

表示:
レコード
名字名前役職住所市/州
 

複数の行選択

表示:
レコード
名字名前役職住所市/州
 

デフォルトの行セレクター

表示:
レコード
Last NameFirst NameTitleAddressCity
 

チェックボックス付きの行セレクター

表示:
レコード
Last NameFirst NameTitleAddressCity
 

行番号

表示:
レコード
Last NameFirst NameTitleAddressCity
 

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

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

選択にはセルと行の 2 つのモードがあります。セル モードでは特定のセルを選択できます。行モードでは特定の行を選択できます。2 つのモードを単一選択または複数選択に設定できます。multipleSelection を true に設定すると、複数選択が有効になります。
行セレクター機能は、グリッドの最初の列の左側に配置された行セレクター列をクリックすることで、セルまたは行全体を選択する機能をユーザーに提供します。さらに、そのウィジェットは行の番号付け機能や行を選択するためのチェックボックスを備えています。
以上のグリッドは、行セレクター機能の複数の構成を使用します。
注: 行セレクターは選択機能の依存関係があり、選択機能が定義されていない場合にエラーを発生します。

コード ビュー

クリップボードへコピー 
<!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 class="samplePage">
	<br />
	<h3>単一のセル選択</h3>
	<!-- Target element for the CellSelection igHierarchicalGrid -->
	<table id="cellSelectionGrid"></table>
	<br />
	<h3>複数の行選択</h3>
	<!-- Target element for the RowSelection igHierarchicalGrid -->
	<table id="rowSelectionGrid"></table>
	<h3>デフォルトの行セレクター</h3>
	<!-- Target element for the Default RowSelectors igHierarchicalGrid -->
	<table id="defaultRowSelectors"></table>
	<br />
	<h3>チェックボックス付きの行セレクター</h3>
	<!-- Target element for the Checkboxes RowSelectors igHierarchicalGrid -->
	<table id="cbRowSelectors"></table>
	<br />
	<h3>行番号</h3>
	<!-- Target element for the RowNumbering igHierarchicalGrid -->
	<table id="rowNumbering"></table>

	<!--Sample JSON Data-->
	<script src="/data-files/northwind.js"></script>

	<script type="text/javascript">

		$(function () {
			/*----------------- Instantiation -------------------------*/
			createCellSelectionGrid();
			createRowSelectionGrid();
			createDefaultSelectorsGrid();
			createCboxSelectorsGrid();
			createRowNumberingGrid();
		});

		function createCellSelectionGrid() {
			$("#cellSelectionGrid").igHierarchicalGrid({
				width: "100%",
				autoGenerateColumns: false,
				dataSource: northwind,
				responseDataKey: "results",
				dataSourceType: "json",
				features: [
						{
							name: "Responsive",
							enableVerticalRendering: false,
							columnSettings: [
								{
									columnKey: "Title",
									classes: "ui-hidden-tablet"
								},
								{
									columnKey: "Address",
									classes: "ui-hidden-tablet"
								}
							]
						},
						{
							name: "Selection",
							mode: "cell",
							multipleSelection: false,
							touchDragSelect: false,
							multipleCellSelectOnClick: false
						},
						{
							name: "Paging",
							pageSize: 5,
							type: "local",
							inherit: true
						}
				],
				columns: [
				  { key: "EmployeeID", headerText: "社員 ID", dataType: "number", width: "0%", hidden: true },
				  { key: "LastName", headerText: "名字", dataType: "string", width: "10%" },
				  { key: "FirstName", headerText: "名前", dataType: "string", width: "10%" },
				  { key: "Title", headerText: "役職", dataType: "string", width: "20%" },
				  { key: "Address", headerText: "住所", dataType: "string", width: "20%" },
				  { key: "City", headerText: "市/州", dataType: "string", width: "10%" }
				],
				autoGenerateLayouts: false,
				columnLayouts: [
					{
						key: "Orders",
						autoGenerateColumns: false,
						width: "100%",
						primaryKey: "OrderID",
						columns: [
							{ key: "OrderID", headerText: "注文 ID", dataType: "number", width: "0%", hidden: true },
							{ key: "Freight", headerText: "輸送", dataType: "string", width: "15%" },
							{ key: "ShipName", headerText: "配送先", dataType: "string", width: "20%" },
							{ key: "ShipAddress", headerText: "配送先住所", dataType: "string", width: "20%" },
							{ key: "ShipCity", headerText: "配送先市町村", dataType: "string", width: "15%" },
							{ key: "ShipCountry", headerText: "配送先の国", dataType: "string", width: "15%" }
						],
						features: [
							{
								name: "Responsive",
								enableVerticalRendering: false,
								columnSettings: [
									{
										columnKey: "ShipAddress",
										classes: "ui-hidden-tablet"
									},
									{
										columnKey: "ShipName",
										classes: "ui-hidden-tablet"
									}
								]
							}
						]
					}
				]
			});
		}

		function createRowSelectionGrid() {
			$("#rowSelectionGrid").igHierarchicalGrid({
				width: "100%",
				autoGenerateColumns: false,
				dataSource: northwind,
				responseDataKey: "results",
				dataSourceType: "json",
				features: [
					{
						name: "Responsive",
						enableVerticalRendering: false,
						columnSettings: [
							{
								columnKey: "Title",
								classes: "ui-hidden-tablet"
							},
							{
								columnKey: "Address",
								classes: "ui-hidden-tablet"
							}
						]
					},
					{
						name: "Selection",
						mode: "row",
						multipleSelection: true,
						inherit: true
					},
					{
						name: "Paging",
						pageSize: 5,
						type: "local",
						inherit: true
					}
				],
				columns: [
				  { key: "EmployeeID", headerText: "社員 ID", dataType: "number", width: "0%", hidden: true },
				  { key: "LastName", headerText: "名字", dataType: "string", width: "10%" },
				  { key: "FirstName", headerText: "名前", dataType: "string", width: "10%" },
				  { key: "Title", headerText: "役職", dataType: "string", width: "20%" },
				  { key: "Address", headerText: "住所", dataType: "string", width: "20%" },
				  { key: "City", headerText: "市/州", dataType: "string", width: "10%" }
				],
				autoGenerateLayouts: false,
				columnLayouts: [
					{
						key: "Orders",
						autoGenerateColumns: false,
						width: "100%",
						primaryKey: "OrderID",
						columns: [
							{ key: "OrderID", headerText: "注文 ID", dataType: "number", width: "0%", hidden: true },
							{ key: "Freight", headerText: "輸送", dataType: "string", width: "15%" },
							{ key: "ShipName", headerText: "配送先", dataType: "string", width: "20%" },
							{ key: "ShipAddress", headerText: "配送先住所", dataType: "string", width: "20%" },
							{ key: "ShipCity", headerText: "配送先市町村", dataType: "string", width: "15%" },
							{ key: "ShipCountry", headerText: "配送先の国", dataType: "string", width: "15%" }
						],
						features: [
							{
								name: "Responsive",
								enableVerticalRendering: false,
								columnSettings: [
									{
										columnKey: "ShipAddress",
										classes: "ui-hidden-tablet"
									},
									{
										columnKey: "ShipName",
										classes: "ui-hidden-tablet"
									}
								]
							}
						]
					}
				]
			});
		}
		function createDefaultSelectorsGrid() {
			$("#defaultRowSelectors").igHierarchicalGrid({
				width: "100%",
				autoGenerateColumns: false,
				dataSource: northwind,
				responseDataKey: "results",
				dataSourceType: "json",
				features: [
					{
						name: "Responsive",
						enableVerticalRendering: false,
						columnSettings: [
							{
								columnKey: "Title",
								classes: "ui-hidden-phone"
							},
							{
								columnKey: "Address",
								classes: "ui-hidden-phone"
							}
						]
					},
					{
						name: "RowSelectors",
						inherit: true,
						enableRowNumbering: false
					},
					{
						name: "Selection"
					},
					{
						name: "Paging",
						pageSize: 5,
						type: "local",
						inherit: true
					}
				],
				columns: [
				   { key: "EmployeeID", headerText: "Employee ID", dataType: "number", width: "0%", hidden: true },
				   { key: "LastName", headerText: "Last Name", dataType: "string", width: "20%" },
				   { key: "FirstName", headerText: "First Name", dataType: "string", width: "20%" },
				   { key: "Title", headerText: "Title", dataType: "string", width: "20%" },
				   { key: "Address", headerText: "Address", dataType: "string", width: "25%" },
				   { key: "City", headerText: "City", dataType: "string", width: "15%" }
				],
				autoGenerateLayouts: false,
				columnLayouts: [
					{
						key: "Orders",
						width: "100%",
						autoGenerateColumns: false,
						primaryKey: "OrderID",
						columns: [
							{ key: "OrderID", headerText: "Order ID", dataType: "number", width: "0%", hidden: true },
							{ key: "CustomerID", headerText: "Customer ID", dataType: "string", width: "0%", hidden: true },
							{ key: "Freight", headerText: "Freight", dataType: "string", width: "20%" },
							{ key: "ShipName", headerText: "Ship Name", dataType: "string", width: "20%" },
							{ key: "ShipAddress", headerText: "Ship Address", dataType: "string", width: "20%" },
							{ key: "ShipCity", headerText: "Ship City", dataType: "string", width: "20%" },
							{ key: "ShipCountry", headerText: "Ship Country", dataType: "string", width: "20%" }
						],
						features: [
							 {
							 	name: "Responsive",
							 	enableVerticalRendering: false,
							 	columnSettings: [
									{
										columnKey: "ShipAddress",
										classes: "ui-hidden-phone"
									},
									{
										columnKey: "ShipCity",
										classes: "ui-hidden-phone"
									}
							 	]
							 }
						]
					}
				]
			});
		}
		function createCboxSelectorsGrid() {
			$("#cbRowSelectors").igHierarchicalGrid({
				width: "100%",
				autoGenerateColumns: false,
				dataSource: northwind,
				responseDataKey: "results",
				dataSourceType: "json",
				features: [
					{
						name: "Responsive",
						enableVerticalRendering: false,
						columnSettings: [
							{
								columnKey: "Title",
								classes: "ui-hidden-phone"
							},
							{
								columnKey: "Address",
								classes: "ui-hidden-phone"
							}
						]
					},
					{
						name: "RowSelectors",
						inherit: true,
						enableCheckBoxes: true,
						enableRowNumbering: false
					},
					{
						name: "Selection",
						mode: "row",
						multipleSelection: true
					},
					{
						name: "Paging",
						pageSize: 5,
						type: "local",
						inherit: true
					}
				],
				columns: [
				   { key: "EmployeeID", headerText: "Employee ID", dataType: "number", width: "0%", hidden: true },
				   { key: "LastName", headerText: "Last Name", dataType: "string", width: "20%" },
				   { key: "FirstName", headerText: "First Name", dataType: "string", width: "20%" },
				   { key: "Title", headerText: "Title", dataType: "string", width: "20%" },
				   { key: "Address", headerText: "Address", dataType: "string", width: "25%" },
				   { key: "City", headerText: "City", dataType: "string", width: "15%" }
				],
				autoGenerateLayouts: false,
				columnLayouts: [
					{
						key: "Orders",
						width: "100%",
						autoGenerateColumns: false,
						primaryKey: "OrderID",
						columns: [
							{ key: "OrderID", headerText: "Order ID", dataType: "number", width: "0%", hidden: true },
							{ key: "CustomerID", headerText: "Customer ID", dataType: "string", width: "0%", hidden: true },
							{ key: "Freight", headerText: "Freight", dataType: "string", width: "20%" },
							{ key: "ShipName", headerText: "Ship Name", dataType: "string", width: "20%" },
							{ key: "ShipAddress", headerText: "Ship Address", dataType: "string", width: "20%" },
							{ key: "ShipCity", headerText: "Ship City", dataType: "string", width: "20%" },
							{ key: "ShipCountry", headerText: "Ship Country", dataType: "string", width: "20%" }
						],
						features: [
							 {
							 	name: "Responsive",
							 	enableVerticalRendering: false,
							 	columnSettings: [
									{
										columnKey: "ShipAddress",
										classes: "ui-hidden-phone"
									},
									{
										columnKey: "ShipName",
										classes: "ui-hidden-phone"
									}
							 	]
							 }
						]
					}
				]
			});
		}
		function createRowNumberingGrid() {
			$("#rowNumbering").igHierarchicalGrid({
				width: "100%",
				autoGenerateColumns: false,
				dataSource: northwind,
				responseDataKey: "results",
				dataSourceType: "json",
				features: [
					{
						name: "Responsive",
						enableVerticalRendering: false,
						columnSettings: [
							{
								columnKey: "Title",
								classes: "ui-hidden-phone"
							},
							{
								columnKey: "Address",
								classes: "ui-hidden-phone"
							}
						]
					},
					{
						name: "RowSelectors",
						inherit: true,
						enableRowNumbering: true
					},
					{
						name: "Selection",
						mode: "row",
						inherit: true,
						multipleSelection: true
					},
					{
						name: "Paging",
						pageSize: 5,
						type: "local",
						inherit: true
					}
				],
				columns: [
				   { key: "EmployeeID", headerText: "Employee ID", dataType: "number", width: "0%", hidden: true },
				   { key: "LastName", headerText: "Last Name", dataType: "string", width: "20%" },
				   { key: "FirstName", headerText: "First Name", dataType: "string", width: "20%" },
				   { key: "Title", headerText: "Title", dataType: "string", width: "20%" },
				   { key: "Address", headerText: "Address", dataType: "string", width: "25%" },
				   { key: "City", headerText: "City", dataType: "string", width: "15%" }
				],
				autoGenerateLayouts: false,
				columnLayouts: [
					{
						key: "Orders",
						width: "100%",
						autoGenerateColumns: false,
						primaryKey: "OrderID",
						columns: [
							{ key: "OrderID", headerText: "Order ID", dataType: "number", width: "0%", hidden: true },
							{ key: "CustomerID", headerText: "Customer ID", dataType: "string", width: "0%", hidden: true },
							{ key: "Freight", headerText: "Freight", dataType: "string", width: "20%" },
							{ key: "ShipName", headerText: "Ship Name", dataType: "string", width: "20%" },
							{ key: "ShipAddress", headerText: "Ship Address", dataType: "string", width: "20%" },
							{ key: "ShipCity", headerText: "Ship City", dataType: "string", width: "20%" },
							{ key: "ShipCountry", headerText: "Ship Country", dataType: "string", width: "20%" }
						],
						features: [
							 {
							 	name: "Responsive",
							 	enableVerticalRendering: false,
							 	columnSettings: [
									{
										columnKey: "ShipAddress",
										classes: "ui-hidden-phone"
									},
									{
										columnKey: "ShipCity",
										classes: "ui-hidden-phone"
									}
							 	]
							 }
						]
					}
				]
			});
		}
	</script>
</body>
</html>