ui.igGridCellMerging

ui.igGridCellMerging_image

igGrid の結合セル機能は、隣接する行の同じ値を持つセルを結合します。同じ値を持つセルを結合できるため、列を並び替えた後に便利な機能です。

以下のコード スニペットは、igGrid コントロールを初期化する方法を示します。

この API を使用して作業を開始する方法は こちらをクリックしてください。igGrid コントロールの必要なスクリプトおよびテーマを参照する方法については、 「Ignite UI で JavaScript リソースを使用する」および Ignite UI のスタイル設定とテーマを参照してください。

コード サンプル

 
<!doctype html>
<html>
<head>
    <!-- jQuery Core -->
    <script src="js/jquery.js" type="text/javascript"></script>
	<!-- jQuery Mobile -->
    <script src="js/jquery.mobile.js" type="text/javascript"></script>
	<!-- Moderznizr -->
    <script src="js/modernizr.js" type="text/javascript"></script>
    <!-- jQuery UI -->
    <script src="js/jquery-ui.js" type="text/javascript"></script>
    <!-- Infragistics Loader Script -->
    <script src="js/infragistics.loader.js" type="text/javascript"></script>    
	<!-- Infragistics Loader Initialization -->
    <script type="text/javascript">
		$.ig.loader({
			scriptPath: 'js/',
			cssPath: 'css/',
			resources: 'igGrid.CellMerging.Sorting.Updating'
		})
		
		var productData = [
			{ "ProductID": "1", "UnitsInStock": "100", "ProductDescription": "Laptop", "UnitPrice": "$ 1000" , "DateAdded": new Date() },
			{ "ProductID": "2", "UnitsInStock": "15", "ProductDescription": "Hamburger", "UnitPrice": "$ 10", "DateAdded": new Date() },
			{ "ProductID": "3", "UnitsInStock": "4356", "ProductDescription": "Beer", "UnitPrice": "$ 1000", "DateAdded": new Date() },
			{ "ProductID": "4", "UnitsInStock": "32", "ProductDescription": "mobile phone", "UnitPrice": "$ 1000", "DateAdded": new Date() },
			{ "ProductID": "5", "UnitsInStock": "65", "ProductDescription": "trainers", "UnitPrice": "$ 1000", "DateAdded": new Date() },
			{ "ProductID": "6", "UnitsInStock": "25", "ProductDescription": "coffee cup", "UnitPrice": "$ 1000", "DateAdded": new Date() },
			{ "ProductID": "7", "UnitsInStock": "98", "ProductDescription": "BMW 323 CI", "UnitPrice": "$ 1000", "DateAdded": new Date() },
			{ "ProductID": "8", "UnitsInStock": "998", "ProductDescription": "mouse", "UnitPrice": "$ 1000", "DateAdded": new Date() },
			{ "ProductID": "9", "UnitsInStock": "43", "ProductDescription": "keyboard", "UnitPrice": "$ 1000", "DateAdded": new Date() },
			{ "ProductID": "10", "UnitsInStock": "69", "ProductDescription": "fish", "UnitPrice": "$ 1000", "DateAdded": new Date() },
			{ "ProductID": "11", "UnitsInStock": "100", "ProductDescription": "Laptop", "UnitPrice": "$ 1000" , "DateAdded": new Date() },
			{ "ProductID": "12", "UnitsInStock": "15", "ProductDescription": "Hamburger", "UnitPrice": "$ 10", "DateAdded": new Date() },
			{ "ProductID": "13", "UnitsInStock": "4356", "ProductDescription": "Beer", "UnitPrice": "$ 1000", "DateAdded": new Date() },
			{ "ProductID": "14", "UnitsInStock": "32", "ProductDescription": "mobile phone", "UnitPrice": "$ 1000", "DateAdded": new Date() },
			{ "ProductID": "15", "UnitsInStock": "65", "ProductDescription": "trainers", "UnitPrice": "$ 1000", "DateAdded": new Date() },
			{ "ProductID": "16", "UnitsInStock": "25", "ProductDescription": "coffee cup", "UnitPrice": "$ 1000", "DateAdded": new Date() },
			{ "ProductID": "17", "UnitsInStock": "98", "ProductDescription": "BMW 323 CI", "UnitPrice": "$ 1000", "DateAdded": new Date() },
			{ "ProductID": "18", "UnitsInStock": "998", "ProductDescription": "BMW 323 CI", "UnitPrice": "$ 1000", "DateAdded": new Date() },
			{ "ProductID": "19", "UnitsInStock": "43", "ProductDescription": "keyboard", "UnitPrice": "$ 1000", "DateAdded": new Date() },
			{ "ProductID": "20", "UnitsInStock": "69", "ProductDescription": "fish", "UnitPrice": "$ 1000", "DateAdded": new Date() },
		];
		
		$.ig.loader(function () {
			$("#grid1").igGrid({
				dataSource: productData,
				responseDataKey: "ProductID",
				fixedFooters: false,
				fixedHeaders: true,
				virtualization: false,
				autoGenerateColumns: false,
				width: 600,
				defaultColumnWidth: 140,
				columns: [
					{ headerText: "Product ID", key: "ProductID", dataType: "number", width: 100},
					{ headerText: "Units in Stock", key: "UnitsInStock", dataType: "number", width: 150},
					{ headerText: "Product Description", key: "ProductDescription", dataType: "string", width: 150},
					{ headerText: "Unit Price", key: "UnitPrice", dataType: "string", width: 150 }
				],
				features: [
					{
						name: "CellMerging",
						initialState: "merged"
					},
					{
						name: "Sorting",
						type: "local",
						mode: "multiple"
					}
				]
			});
		});
	</script>
</head>
<body>
	<table id="grid1"></table>
</body>
    

関連サンプル

関連トピック

依存関係

jquery-1.9.1.js
jquery.ui.core.js
jquery.ui.widget.js
infragistics.util.js
infragistics.ui.widget.js
infragistics.datasource.js
infragistics.ui.grid.framework.js
infragistics.ui.shared.js

継承

  • columnSettings

    タイプ:
    array
    デフォルト:
    []
    要素タイプ:
    object

    非表示オプションを列ごとに指定する列設定のリスト。

    コード サンプル

     
    				//Initialize
    				$(".selector").({
    					features : [
    						{
    							name : "CellMerging",
    							columnSettings: [
    								{ columnKey: "ProductID", mergeOn: "always" }
    							]
    						}
    					]
    				});
    				//Get
    				var columnSettings = $(".selector").igGridCellMerging("option", "columnSettings");
    			 
    • columnIndex

      タイプ:
      number
      デフォルト:
      -1

      列インデックス。これは、columnKey が設定されていない場合に各列設定で必要なプロパティです。

      コード サンプル

       
      						//Initialize
      						$(".selector").({
      							features: [
      								{
      									name: "CellMerging",
      									columnSettings: [
      										{ columnIndex: 0, mergeOn: "always" }
      									]
      								}
      							]
      						});
      					 
    • columnKey

      タイプ:
      string
      デフォルト:
      null

      列キー。これは、columnIndex が設定されていない場合に各列設定で必要なプロパティです。

      コード サンプル

       
      						//Initialize
      						$(".selector").({
      							features: [
      								{
      									name: "CellMerging",
      									columnSettings: [
      										{ columnKey: "ProductID", mergeOn: "always" }
      									]
      								}
      							]
      						});
      					 
    • mergeOn

      タイプ:
      enumeration
      デフォルト:
      sorting

      結合がいつ適用されるかを定義します。

      メンバー

      • sorting
      • タイプ:string
      • 列は並べ替えたときのみ結合されます。
      • always
      • タイプ:string
      • 列は常に結合されます。
      • never
      • タイプ:string
      • 結合を適用しません。

      コード サンプル

       
      							//Initialize
      							$(".selector").({
      								features : [
      									{
      										name : "CellMerging",
      										columnSettings: [
      											{ columnKey: "ProductID", mergeOn: "always" }
      										]
      									}
      								]
      							});
      						 
    • mergeStrategy

      タイプ:
      enumeration
      デフォルト:
      duplicate

      結合に基づくルールを定義します。

      メンバー

      • duplicate
      • タイプ:string
      • 列の重複する値が結合されます。
      • null
      • タイプ:string
      • 結合は null 以外の値の後の null 値に適用されます。
      • function
      • type="function|string" 結合は提供された関数に基づいて適用されます。関数を参照または名前に基づいて提供できます。名前の場合、window のプロパティとして利用可能でなければなりません。関数は 'prevRecord' (チェーンの以前のレコード)、'curRecord' (チェーンの現在のレコード)、および 'columnKey' (結合が実行している列のキー) の引数を取得します。

      コード サンプル

       
      							//Initialize
      							$(".selector").({
      								features : [
      									{
      										name : "CellMerging",
      										mergeOn: "always"
      									}
      								]
      							});;
      						 
  • inherit

    タイプ:
    bool
    デフォルト:
    false

    子レイアウトで機能継承を有効または無効にします。注: igHierarchicalGrid のみに適用します。

  • language
    継承

    タイプ:
    string
    デフォルト:
    "en"

    ウィジェットのロケール言語設定を取得または設定します。

    コード サンプル

     
    					//Initialize
    				$(".selector").igGridCellMerging({
    					language: "ja"
    				});
    
    				// Get
    				var language = $(".selector").igGridCellMerging("option", "language");
    
    				// Set
    				$(".selector").igGridCellMerging("option", "language", "ja");
    			 
  • locale
    継承

    タイプ:
    object
    デフォルト:
    null

    ウィジェットのロケール設定を取得または設定します。

    コード サンプル

     
    					//Initialize
    				$(".selector").igGridCellMerging({
    					locale: {}
    				});
    
    				// Get
    				var locale = $(".selector").igGridCellMerging("option", "locale");
    
    				// Set
    				$(".selector").igGridCellMerging("option", "locale", {});
    			 
  • mergeOn

    タイプ:
    enumeration
    デフォルト:
    sorting

    結合がいつ適用されるかを定義します。

    メンバー

    • sorting
    • タイプ:string
    • 並べ替えた列のみ結合を適用します。
    • always
    • タイプ:string
    • 常にすべての列に結合を適用します。
    • never
    • タイプ:string
    • 結合を適用しません。

    コード サンプル

     
    					//Initialize
    					$(".selector").({
    						features : [
    							{
    								name : "CellMerging",
    								mergeOn: "always"
    							}
    						]
    					});
    					//Get
    					var mergeOn = $(".selector").igGridCellMerging("option", "mergeOn");
    					//Set
    					$(".selector").igGridCellMerging("option", "mergeOn", "always");
    				 
  • mergeStrategy

    タイプ:
    enumeration
    デフォルト:
    duplicate

    結合に基づくルールを定義します。

    メンバー

    • duplicate
    • タイプ:string
    • 列の重複する値が結合されます。
    • null
    • タイプ:string
    • 結合は null 以外の値の後の null 値に適用されます。
    • function
    • type="function|string" 結合は提供された関数に基づいて適用されます。関数を参照または名前に基づいて提供できます。名前の場合、window のプロパティとして利用可能でなければなりません。関数は 'prevRecord' (チェーンの以前のレコード)、'curRecord' (チェーンの現在のレコード)、および 'columnKey' (結合が実行している列のキー) の引数を取得します。

    コード サンプル

     
    					//Initialize
    					$(".selector").({
    						features : [
    							{
    								name : "CellMerging",
    								mergeOn: "null"
    							}
    						]
    					});
    					//Get
    					var mergeStrategy = $(".selector").igGridCellMerging("option", "mergeStrategy");
    					//Set
    					$(".selector").igGridCellMerging("option", "mergeStrategy", "null");
    				 
  • mergeType

    タイプ:
    enumeration
    デフォルト:
    visual

    結合のタイプを定義します。

    メンバー

    • visual
    • タイプ:string
    • グリッド セルは視覚的にのみ結合されます。
    • physical
    • タイプ:string
    • グリッド セルは rowspan で物理的に結合されます。

    コード サンプル

     
    				//Initialize
    				$(".selector").({
    					features : [
    						{
    							name : "CellMerging",
    							mergeType: "physical"
    						}
    					]
    				});
    				//Get
    				var mergeType = $(".selector").igGridCellMerging("option", "mergeType");
    			 
  • regional
    継承

    タイプ:
    enumeration
    デフォルト:
    en-US

    ウィジェットの領域設定を取得または設定します。

    コード サンプル

     
    				//Initialize
    				$(".selector").igGridCellMerging({
    					regional: "ja"
    				});
    				// Get
    				var regional = $(".selector").igGridCellMerging("option", "regional");
    				// Set
    				$(".selector").igGridCellMerging("option", "regional", "ja");
    			 

Ignite UI コントロール イベントの詳細については、
Ignite UI でイベントを使用するを参照してください。

注: API メソッドの呼び出しは、API ヘルプに特に記述がない限り、操作に関連するイベントはプログラムによって発生されません。これらのイベントは各ユーザー操作によってのみ呼び出されます。

詳細の表示
  • cellsMerged

    キャンセル可能:
    false

    • evt
      タイプ: Event

      jQuery イベント オブジェクト。

    • ui
      タイプ: Object

        • owner
          タイプ: Object

          igGridCellMerging への参照を取得します。

        • owner.grid
          タイプ: Object

          igGridCellMerging が初期化される igGrid への参照を取得します。

        • row
          タイプ: jQuery

          DOM で利用可能な場合、結合されたグループが開始する行への参照を取得します。

        • rowIndex
          タイプ: Number

          結合されたグループが開始する行のデータ インデックスを取得します。

        • rowId
          タイプ: Unknown

          利用可能な場合、結合されたグループが開始する行のプライマリ キーを取得します。

        • columnKey
          タイプ: String

          結合が実行されている列キーを取得します。

        • firstRecord
          タイプ: Object

          結合が実行されている結合チェーンの最初のレコードを取得します。

        • record
          タイプ: Object

          結合が実行されている結合チェーンの最後のレコードを取得します。

        • count
          タイプ: Number

          結像されたセルの合計数を取得します。

    コード サンプル

     
    				//Bind after initialization
    				$(document).delegate(".selector", "iggridcellmergingcellsmerged", function (evt, ui) {
    					//return the triggered event
    					evt;
    
    					// Gets reference to the igGridCellMerging widget.
    					ui.owner;
    
    					// Gets reference to the igGrid the igGridCellMerging is initialized for.
    					ui.owner.grid;
    
    					// Gets a reference to the row the merged group starts in if available in the DOM.
    					ui.row;
    
    					// Gets the data index of the row the merged group starts in.
    					ui.rowIndex;
    
    					// Gets the PK of the row the merged group starts in if available.
    					ui.rowId;
    
    					// Gets the column key the merge is being executed for.
    					ui.columnKey;
    
    					// Gets the first record in the merging chain that the merge is executed for.
    					ui.firstRecord;
    
    					// Gets the last record in the merging chain that the merge is executed for.
    					ui.record;
    
    					// Get the total count of cells that were merged.
    					ui.count;
    
    				});
    
    				//Initialize
    				$(".selector").igGrid({
    					features : [
    						{
    							name : "CellMerging",
    							cellsMerged: function(evt, ui){ ... }
    						}
    					]
    				});
    			 
  • cellsMerging

    キャンセル可能:
    true

    新しく結合されたセル グループが作成される前に発生します。

    • evt
      タイプ: Event

      jQuery イベント オブジェクト。

    • ui
      タイプ: Object

        • owner
          タイプ: Object

          igGridCellMerging へを取得します。

        • owner.grid
          タイプ: Object

          igGridCellMerging が初期化される igGrid への参照を取得します。

        • row
          タイプ: jQuery

          DOM に利用可能な場合、結合されたグループが開始する行への参照を取得します。

        • rowIndex
          タイプ: Number

          結合されたグループが開始する行のデータ インデックスを取得します。

        • rowId
          タイプ: Unknown

          利用可能な場合、結合されたグループが開始する行のプライマリ キーを取得します。

        • columnKey
          タイプ: String

          結合が実行されている列キーを取得します。

        • firstRecord
          タイプ: Object

          結合が実行されている結合チェーンの最初のレコードを取得します。

        • record
          タイプ: Object

          結合が実行されている結合チェーンの次のレコードを取得します。

    コード サンプル

     
    				//Bind after initialization
    				$(document).on("iggridcellmergingcellsmerging", ".selector", function (evt, ui) {
    					//return the triggered event
    					evt;
    
    					// Gets reference to the igGridCellMerging widget.
    					ui.owner;
    
    					// Gets reference to the igGrid the igGridCellMerging is initialized for.
    					ui.owner.grid;
    
    					// Gets a reference to the row the merged group starts in if available in the DOM.
    					ui.row;
    
    					// Gets the data index of the row the merged group starts in.
    					ui.rowIndex;
    
    					// Gets the PK of the row the merged group starts in if available.
    					ui.rowId;
    
    					// Gets the column key the merge is being executed for.
    					ui.columnKey;
    
    					// Gets the first record in the merging chain that the merge is executed for.
    					ui.firstRecord;
    
    					// Gets the next record in the merging chain that the merge is executed for.
    					ui.record;
    
    				});
    
    				//Initialize
    				$(".selector").igGrid({
    					features : [
    						{
    							name : "CellMerging",
    							cellsMerging: function(evt, ui){ ... }
    						}
    					]
    				});
    			 
  • changeLocale
    継承

    .igGridCellMerging( "changeLocale", $container:object );

    ウィジェット要素のすべてのロケールを options.language に指定される言語に変更します。
    注: このメソッドは珍しいシナリオのみで使用されます。language または locale オプションのセッターを参照してください。

    • $container
    • タイプ:object
    • オプションのパラメーター: 設定しない場合、ウィジェットの要素を $container として使用します。

    コード サンプル

     
    				$(".selector").igGridCellMerging("changeLocale");
    			 
  • destroy

    .igGridCellMerging( "destroy" );

    すべての igGridCellMerging UI 変更を削除し、ウィジェットを破棄します。

    コード サンプル

     
    				$(".selector").igGridCellMerging("destroy");
    			 
  • isMerged

    .igGridCellMerging( "isMerged", column:object );
    返却型:
    bool
    返却型の説明:
    列が結合済みの場合、'true' を返します。そうでない場合は 'false'。

    列の結合状態を返します。

    • column
    • タイプ:object
    • 状態を取得するための列インデックスまたは列キー。

    コード サンプル

     
    				var isMerged = $(".selector").igGridCellMerging("isMerged", "ProductNumber");
    			 
  • mergeColumn

    .igGridCellMerging( "mergeColumn", column:object, raiseEvents:bool );
    返却型:
    jquery
    返却型の説明:
    ウィジェット要素を返します。

    結合されていない場合、指定した列を結合します。

    • column
    • タイプ:object
    • 結合する列インデックスまたは列キー。
    • raiseEvents
    • タイプ:bool
    • 操作が結合に関連するイベントを発生するかどうかを指定します。

    コード サンプル

     
    				$(".selector").igGridCellMerging("mergeColumn", "ProductNumber", false);
    			 
  • unmergeColumn

    .igGridCellMerging( "unmergeColumn", column:object );
    返却型:
    jquery
    返却型の説明:
    ウィジェット要素を返します。

    列を結合していない状態に戻します。列が結合されていない場合は何もしません。

    • column
    • タイプ:object
    • 結合解除する列インデックスまたは列キー。

    コード サンプル

     
    				$(".selector").igGridCellMerging("unmergeColumn", "ProductNumber");
    			 
  • ui-iggrid-mergedcell

    視覚的に結合されたグループの各セルに適用されるクラス。
  • ui-iggrid-mergedcellsbottom

    視覚的に結合されたグループの一番下のセルに適用されるクラス。
  • ui-iggrid-mergedcellstop

    視覚的に結合されたグループの一番上のセルに適用されるクラス。
  • ui-iggrid-physicalmergedcell

    物理的に結合されたグループの各セルに適用されるクラス。

Copyright © 1996 - 2024 Infragistics, Inc. All rights reserved.