製品版のみの機能

グリッド - 複数行レイアウトの編集

このサンプルは、複数行レイアウト グリッドのインライン編集機能を紹介します。より複雑な構造を定義してデータを表示できます。複数行レイアウトは、列コレクションの rowIndex、columnIndex、rowSpan、colSpan 属性を使用して定義されます。
表示:
レコード
製品 ID製品名製品番号安全在庫レベル販売の開始日付変更日付
色価格
新規行の追加
717HL Road Frame - Red, 62FR-R92R-625002001/07/012004/03/11
Color:
1431.5
718HL Road Frame - Red, 44FR-R92R-445002001/07/012004/03/11
Color:
1431.5
719HL Road Frame - Red, 48FR-R92R-485002001/07/012004/03/11
Color:
1431.5
720HL Road Frame - Red, 52FR-R92R-525002001/07/012004/03/11
Color:
1431.5
721HL Road Frame - Red, 56FR-R92R-565002001/07/012004/03/11
Color:
1431.5

グリッド編集モード:

igGrid の編集モードを変更するには、以下のドロップダウン メニューから値を選択してください。

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

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

また、ユーザーは列コレクションに列の navigationIndex プロパティを使用して編集モードでセル間を移動する順序をカスタムに定義できます。割り当てられた数値の範囲は 0 から列数 - -1 で、数値を繰り返すことはできません。navigationIndex が指定されていない列は、標準のブラウザー TAB シーケンスで移動されます。このサンプルはカスタム順序を紹介します。

コード ビュー

クリップボードへコピー 
<!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>
	<!--Sample JSON Data-->
	<script src="/data-files/adventureworks.min.js"></script>
</head>
<body>
	<table id="grid-mrl"></table>
	<br />
	<div>
		<h3>グリッド編集モード:</h3>
		<hr />
		<p style="font-size: 15px; color: #5F6564; margin-top: 1em; margin-bottom: 1em;">
			igGrid の編集モードを変更するには、以下のドロップダウン メニューから値を選択してください。
		</p>
		<div id="editModeCombo"></div>
	</div>
	<script>
		var editModes = [
			{ "ID": 1, "EditMode": "cell" },
			{ "ID": 2, "EditMode": "dialog" },
			{ "ID": 3, "EditMode": "row" },
		];
		$(function () {
			$("#grid-mrl").igGrid({
				dataSource: adventureWorks.slice(221, 250),
				autoCommit: true,
				width: "100%",
				autoGenerateColumns: false,
				primaryKey: "ProductID",
				columns: [
					{ headerText: "製品 ID", key: "ProductID", dataType: "number", rowIndex: 0, columnIndex: 0, rowSpan: 2, width: "0%", navigationIndex: 0 },
					{ headerText: "製品名", key: "Name", dataType: "string", rowIndex: 0, columnIndex: 1, width: "15%", navigationIndex: 1 },
					{ headerText: "製品番号", key: "ProductNumber", dataType: "string", rowIndex: 0, columnIndex: 2, width: "10%", navigationIndex: 2 },
					{ headerText: "安全在庫レベル", key: "SafetyStockLevel", dataType: "number", rowIndex: 0, columnIndex: 3, width: "10%", navigationIndex: 4 },
					{ headerText: "販売の開始日付", key: "SellStartDate", dataType: "date", rowIndex: 0, columnIndex: 4, rowSpan: 2, width: "15%", navigationIndex: 6 },
					{ headerText: "変更日付", key: "ModifiedDate", dataType: "date", rowIndex: 0, columnIndex: 5, rowSpan: 2, width: "15%", navigationIndex: 7 },
					{ headerText: "色", key: "Color", dataType: "string", rowIndex: 1, columnIndex: 1, colSpan: 2, template: "<span><b> Color: </b></span><div style='width:15px; height: 15px; background-color: ${Color}; border-style:solid; display:inline-block; margin-left: 5px; position: relative; top: 7px; '></div>", navigationIndex: 3 },
					{ headerText: "価格", key: "ListPrice", dataType: "number", rowIndex: 1, columnIndex: 3, colSpan: 1, navigationIndex: 5 }
				],
				autofitLastColumn: false,
				features: [
					{
						name: "Paging",
						pageSize: 5
					},
					{
						name: "Updating",
						editMode: "dialog",
						columnSettings: [
							{
								columnKey: "ProductID",
								readOnly: true
							},
							{
								columnKey: "SellStartDate",
								readOnly: true
							},
							{
								columnKey: "ModifiedDate",
								readOnly: true
							},
						],
						rowEditDialogOptions: {
							showReadonlyEditors: false
						}
					}
				]
			});
			$("#editModeCombo").igCombo({
				dataSource: editModes,
                valueKey: "ID",
                mode: "dropdown",
				textKey: "EditMode",
				initialSelectedItems: [
					{ index: 1 }
				],
				selectionChanged: function (evt, ui) {
					var newEditMode = ui.items[0].data.EditMode;
					changeGridEditMode(newEditMode);
				}
			});
			function changeGridEditMode(newEditMode) {
				$("#grid-mrl").igGridUpdating("option", "editMode", newEditMode);
				$("#grid-mrl").igGrid("dataBind");
			}
		});
</script>
</body>
</html>