ui.igTreeGridMultiColumnHeaders

ui.igTreeGridMultiColumnHeaders_image

igTreeGrid で複数列ヘッダー機能があります。非表示、サイズ変更、および列移動機能と結合するヘッダー グループ化を提供します。この API のクラス、オプション、イベント、メソッドおよびテーマに関する詳細は、上記の関連するタブを参照してください。

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

コード サンプル

 
        <!DOCTYPE html>
        <html>
        <head>
            <!-- Infragistics Combined CSS -->
            <link href="css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" />
            <link href="css/structure/infragistics.css" rel="stylesheet" type="text/css" />

            <!-- jQuery Core -->
            <script src="js/jquery.js" type="text/javascript"></script>

            <!-- jQuery UI -->
            <script src="js/jquery-ui.js" type="text/javascript"></script>

            <!-- Infragistics Combined Scripts -->
            <script src="js/infragistics.core.js" type="text/javascript"></script>
            <script src="js/infragistics.lob.js" type="text/javascript"></script>

            <script type="text/javascript">
                var employees = [
                    { "employeeId": 0, "supervisorId": -1, "firstName": "Andrew", "lastName": "Fuller" },
                    { "employeeId": 1, "supervisorId": -1, "firstName": "Jonathan", "lastName": "Smith" },
                    { "employeeId": 2, "supervisorId": -1, "firstName": "Nancy", "lastName": "Davolio" },
                    { "employeeId": 3, "supervisorId": -1, "firstName": "Steven", "lastName": "Buchanan" },

                    // Andrew Fuller's direct reports
                    { "employeeId": 4, "supervisorId": 0, "firstName": "Janet", "lastName": "Leverling" },
                    { "employeeId": 5, "supervisorId": 0, "firstName": "Laura", "lastName": "Callahan" },
                    { "employeeId": 6, "supervisorId": 0, "firstName": "Margaret", "lastName": "Peacock" },
                    { "employeeId": 7, "supervisorId": 0, "firstName": "Michael", "lastName": "Suyama" },

                    // Janet Leverling's direct reports
                    { "employeeId": 8, "supervisorId": 4, "firstName": "Anne", "lastName": "Dodsworth" },
                    { "employeeId": 9, "supervisorId": 4, "firstName": "Danielle", "lastName": "Davis" },
                    { "employeeId": 10, "supervisorId": 4, "firstName": "Robert", "lastName": "King" },

                    // Nancy Davolio's direct reports
                    { "employeeId": 11, "supervisorId": 2, "firstName": "Peter", "lastName": "Lewis" },
                    { "employeeId": 12, "supervisorId": 2, "firstName": "Ryder", "lastName": "Zenaida" },
                    { "employeeId": 13, "supervisorId": 2, "firstName": "Wang", "lastName": "Mercedes" },

                    // Steve Buchanan's direct reports
                    { "employeeId": 14, "supervisorId": 3, "firstName": "Theodore", "lastName": "Zia" },
                    { "employeeId": 15, "supervisorId": 3, "firstName": "Lacota", "lastName": "Mufutau" },

                    // Lacota Mufutau's direct reports
                    { "employeeId": 16, "supervisorId": 15, "firstName": "Jin", "lastName": "Elliott" },
                    { "employeeId": 17, "supervisorId": 15, "firstName": "Armand", "lastName": "Ross" },
                    { "employeeId": 18, "supervisorId": 15, "firstName": "Dane", "lastName": "Rodriquez" },

                    // Dane Rodriquez's direct reports
                    { "employeeId": 19, "supervisorId": 18, "firstName": "Declan", "lastName": "Lester" },
                    { "employeeId": 20, "supervisorId": 18, "firstName": "Bernard", "lastName": "Jarvis" },

                    // Bernard Jarvis' direct report
                    { "employeeId": 21, "supervisorId": 20, "firstName": "Jeremy", "lastName": "Donaldson" }
                ];

               $(function () {
                   $("#treegrid").igTreeGrid({
                       dataSource: employees,
                       primaryKey: "employeeId",
                       foreignKey: "supervisorId",
                       autoGenerateColumns: false,
                       columns: [
                            { headerText: "ID", key: "employeeId", width: "150px", dataType: "number" },
                            {
                                headerText: "Name", key: "fullName", datatype: "string", group: [
                                    { headerText: "First", key: "firstName", width: "150px", dataType: "string" },
                                    { headerText: "Last", key: "lastName", width: "150px", dataType: "string" }
                                ]
                            }],
                       featues: [{
                           name: "MultiColumnHeaders"
                       }]
                   });
               });
            </script>
        </head>
        <body>
            <table id="treegrid"></table>
        </body>
        </html>

関連トピック

依存関係

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

継承

このコントロールにオプションはありません。

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

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

詳細の表示

  • groupCollapsed
    継承

    キャンセル可能:
    false

    グループの縮小が実行され結果が描画された後に発生するイベント。

    • evt
      タイプ: Event

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

    • ui
      タイプ: Object

        • owner
          タイプ: Object

          GridMultiColumnHeaders ウィジェットへの参照を取得します。

        • owner.grid
          タイプ: Object

          グリッド ウィジェットへの参照を取得します。

        • column
          タイプ: Object

          縮小されたグループの column オブジェクトを取得します。

        • element
          タイプ: jQuery

          縮小されている列の jQuery オブジェクト (th) への参照を取得します。

    コード サンプル

     
				//Bind after initialization
				$(document).on("igtreegridmulticolumnheadersgroupcollapsed", ".selector", function (evt, ui) {
					// return the triggered event
					evt;

					// a reference to the igTreeGridMultiColumnHeaders widget
					ui.owner;

					// the column object for the current group that is collapsed
					ui.column;

					// a reference to the jQuery object for the column being collapsed (th)
					ui.element
				});

				//Initialize
				$(".selector").igTreeGrid({
					features : [
						{
							name : "MultiColumnHeaders",
							groupCollapsed: function (evt, ui) { ... }
						}
					]
				});

  • groupCollapsing
    継承

    キャンセル可能:
    true

    グループの縮小操作が実行される前に発生するイベント。

    • evt
      タイプ: Event

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

    • ui
      タイプ: Object

        • owner
          タイプ: Object

          GridMultiColumnHeaders ウィジェットへの参照を取得します。

        • owner.grid
          タイプ: Object

          グリッド ウィジェットへの参照を取得します。

        • column
          タイプ: Object

          縮小されているグループの column オブジェクトを取得します。

        • element
          タイプ: jQuery

          縮小されている列の jQuery オブジェクト (th) への参照を取得します。

    コード サンプル

     
				//Bind after initialization
				$(document).on("igtreegridmulticolumnheadersgroupcollapsing", ".selector", function (evt, ui) {
					// return the triggered event
					evt;

					// a reference to the igTreeGridMultiColumnHeaders widget
					ui.owner;

					// the column object for the current group that is collapsing
					ui.column;

					// a reference to the jQuery object for the column being collapsing (th)
					ui.element
				});

				//Initialize
				$(".selector").igTreeGrid({
					features : [
						{
							name : "MultiColumnHeaders",
							groupCollapsing: function (evt, ui) { ... }
						}
					]
				});

  • groupExpanded
    継承

    キャンセル可能:
    false

    グループの展開が実行され結果が描画された後に発生するイベント。

    • evt
      タイプ: Event

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

    • ui
      タイプ: Object

        • owner
          タイプ: Object

          GridMultiColumnHeaders ウィジェットへの参照を取得します。

        • owner.grid
          タイプ: Object

          グリッド ウィジェットへの参照を取得します。

        • owner.column
          タイプ: Object

          展開されたグループの column オブジェクトを取得します。

        • element
          タイプ: jQuery

          展開されている列の jQuery オブジェクト (th) への参照を取得します。

    コード サンプル

     
				//Bind after initialization
				$(document).on("igtreegridmulticolumnheadersgroupexpanded", ".selector", function (evt, ui) {
					// return the triggered event
					evt;

					// a reference to the igTreeGridMultiColumnHeaders widget
					ui.owner;

					// the column object for the current group that is expanded
					ui.column;

					// a reference to the jQuery object for the column being expanded (th)
					ui.element
				});

				//Initialize
				$(".selector").igTreeGrid({
					features : [
						{
							name : "MultiColumnHeaders",
							groupExpanded: function (evt, ui) { ... }
						}
					]
				});

  • groupExpanding
    継承

    キャンセル可能:
    true

    グループの展開操作が実行される前に発生するイベント。

    • evt
      タイプ: Event

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

    • ui
      タイプ: Object

        • owner
          タイプ: Object

          GridMultiColumnHeaders ウィジェットへの参照を取得します。

        • owner.grid
          タイプ: Object

          グリッド ウィジェットへの参照を取得します。

        • column
          タイプ: Object

          展開されているグループの column オブジェクトを取得します。

        • element
          タイプ: jQuery

          展開されている列の jQuery オブジェクト (th) への参照を取得します。

    コード サンプル

     
				//Bind after initialization
				$(document).on("igtreegridmulticolumnheadersgroupexpanded", ".selector", function (evt, ui) {
					// return the triggered event
					evt;

					// a reference to the igTreeGridMultiColumnHeaders widget
					ui.owner;

					// the column object for the current group that is expanding
					ui.column;

					// a reference to the jQuery object for the column being expanded (th)
					ui.element
				});

				//Initialize
				$(".selector").igTreeGrid({
					features : [
						{
							name : "MultiColumnHeaders",
							groupExpanded: function (evt, ui) { ... }
						}
					]
				});

  • changeLocale
    継承

    .igTreeGridMultiColumnHeaders( "changeLocale" );

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

    コード サンプル

     
				$(".selector").igTreeGridMultiColumnHeaders("changeLocale");

  • collapseGroup
    継承

    .igTreeGridMultiColumnHeaders( "collapseGroup", groupKey:string, [callback:function] );

    展開されたグループを縮小します。 グループが縮小される場合、このメソッドは何もしません。
    注: このメソッドは非同期です。ただちに返し、以後のコードは並行して実行されます。 ランタイム エラーを発生する場合があります。 エラーを回避するには、メソッドによって提供されるコールバック パラメーターに以後のコードを挿入します。

    • groupKey
    • タイプ:string
    • グループのキー。
    • callback
    • タイプ:function
    • オプション
    • グループを縮小したときに呼び出すカスタム関数を指定します。

    コード サンプル

     
				$(".selector").igTreeGridMultiColumnHeaders("collapseGroup", "groupKey");

  • destroy

    .igTreeGridMultiColumnHeaders( "destroy" );

    複数列ウィジェットを破棄します。

    コード サンプル

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

  • expandGroup
    継承

    .igTreeGridMultiColumnHeaders( "expandGroup", groupKey:string, [callback:function] );

    縮小されたグループを展開します。 グループが展開される場合、このメソッドは何もしません。
    注: このメソッドは非同期です。ただちに返し、以後のコードは並行して実行されます。 ランタイム エラーを発生する場合があります。 エラーを回避するには、メソッドによって提供されるコールバック パラメーターに以後のコードを挿入します。

    • groupKey
    • タイプ:string
    • グループのキー。
    • callback
    • タイプ:function
    • オプション
    • グループを展開したときに呼び出すカスタム関数を指定します。

    コード サンプル

     
				$(".selector").igTreeGridMultiColumnHeaders("expandGroup", "groupKey");

  • getMultiColumnHeaders
    継承

    .igTreeGridMultiColumnHeaders( "getMultiColumnHeaders" );
    返却型:
    array
    返却型の説明:
    列の配列。

    複数ヘッダーの配列を返します。複数ヘッダーがない場合、undefined を返します。

    コード サンプル

     
				var columns = $(".selector").igTreeGridMultiColumnHeaders("getMultiColumnHeaders");

  • toggleGroup
    継承

    .igTreeGridMultiColumnHeaders( "toggleGroup", groupKey:string, [callback:function] );

    グループを切り替えます。
    注: このメソッドは非同期です。ただちに返し、以後のコードは並行して実行されます。 ランタイム エラーを発生する場合があります。 エラーを回避するには、メソッドによって提供されるコールバック パラメーターに以後のコードを挿入します。

    • groupKey
    • タイプ:string
    • グループのキー。
    • callback
    • タイプ:function
    • オプション
    • グループを切り替えたときに呼び出すカスタム関数を指定します。

    コード サンプル

     
				$(".selector").igTreeGridMultiColumnHeaders("toggleGroup", "groupKey");

  • ui-iggrid-multiheader-collapsed

    縮小された [ヘッダー] ボタンに適用されるクラス。

  • ui-iggrid-indicatorcontainer ui-iggrid-collapsibleindicatorcontainer

    縮小可能な [ヘッダー] ボタンのコンテナーに適用されるクラス。

  • ui-iggrid-multiheader-expanded

    展開済み [ヘッダー] ボタンに適用されるクラス。

  • ui-iggrid-multiheader-cell

    複数列ヘッダー セル (複数列ヘッダーに子があるグループ ヘッダー セル) に適用されるクラス。

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