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.ui.grid.framework.js
infragistics.ui.shared.js
infragistics.datasource.js
infragistics.util.js

継承

  • inherit

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

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

  • initialState

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

    初期状態を制御します。

    メンバー

    • regular
    • タイプ:string
    • グリッドはセルの結合で初期化されません。
    • merged
    • タイプ:string
    • グリッドはセルの結合で初期化されます。

    コード サンプル

     
        //Initialize
        $(".selector").igGrid({
            features : [
                {
                    name : "CellMerging",
                    initialState: "merged"
                }
            ]
        });
        
        //Get
        var state = $(".selector").igGridCellMerging("option", "initialState");

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

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

詳細の表示

  • cellsMerged

    キャンセル可能:
    false

    • evt
      タイプ:Event

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

    • ui
      タイプ:Object

        • row
          タイプ:jQuery

          結合されたグループが開始する行への参照を取得します。

        • rowIndex
          タイプ:Number

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

        • rowKey
          タイプ:Object

          結合されたグループが開始する行のキーを取得します。

        • owner
          タイプ:Object

          igGridCellMerging へを取得します。

        • grid
          タイプ:Object

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

        • value
          タイプ:Object

          繰り返されるセル値を取得して結合グループを作成します。

        • count
          タイプ:Number

          ui.count を使用して結像されたセルの合計数を取得します。

    コード サンプル

     
        //Bind after initialization
        $(document).delegate(".selector", "iggridcellmergingcellsmerged", function (evt, ui) { 
            //return the triggered event
            evt;
            
            // Get reference to the row the merged group starts in.
            ui.row;
            
            // Get the index of the row the merged group starts in.
            ui.rowIndex;
            
            // Get the key of the row the merged group starts in.
            ui.rowKey;
            
            // Get reference to igGridCellMerging widget.
            ui.owner;
            
            // Get reference to the igGrid the igGridCellMerging are initialized for.
            ui.grid;
            
            // Get the cells value which is repeated and caused the merged group to be created.
            ui.value;
            
            // 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

        • row
          タイプ:jQuery

          結合されたグループが開始する行への参照を取得します。

        • rowIndex
          タイプ:Number

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

        • rowKey
          タイプ:Object

          結合されたグループが開始する行のキーを取得します。

        • owner
          タイプ:Object

          igGridCellMerging へを取得します。

        • grid
          タイプ:Object

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

        • value
          タイプ:Object

          繰り返されるセル値を取得して結合グループを作成します。

    コード サンプル

     
        //Bind after initialization
        $(document).delegate(".selector", "iggridcellmergingcellsmerging", function (evt, ui) { 
            //return the triggered event
            evt;
            
            // Get reference to the row the merged group starts in.
            ui.row;
            
            // Get the index of the row the merged group starts in.
            ui.rowIndex;
            
            // Get the key of the row the merged group starts in.
            ui.rowKey;
            
            // Get reference to igGridCellMerging widget.
            ui.owner;
            
            // Get reference to the igGrid the igGridCellMerging are initialized for.
            ui.grid;
            
            // Get the cells value which is repeated and caused the merged group to be created.
            ui.value;
            
            // Get the total count of cells that were merged.
            ui.count;
        
        });
        
        //Initialize
        $(".selector").igGrid({
            features : [
                {
                    name : "CellMerging",
                    cellsMerging: function(evt, ui){ ... }
                }
            ]
        });

  • destroy

    .igGridCellMerging( "destroy" );

    コード サンプル

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

  • ui-iggrid-mergedcell

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

  • ui-iggrid-mergedcellsbottom

    結合されたグループの下のセルに適用されるクラス。

  • ui-iggrid-mergedcellstop

    結合されたグループの上のセルに適用されるクラス。

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