Ignite UI™ API ヘルプ

ui.igTreeGridMultiColumnHeaders

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>

groupCollapsed
継承

キャンセル可能:: false

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

evt
タイプ: Event

jQuery イベントオブジェクト。
ui
タイプ: Object

コードサンプル

//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

コードサンプル

//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

コードサンプル

//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

コードサンプル

//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

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

Ignite UI for jQuery | API リファレンス

ui.igTreeGridMultiColumnHeaders

コードサンプル

関連トピック

依存関係

継承

groupCollapsed
継承

コードサンプル

groupCollapsing
継承

コードサンプル

groupExpanded
継承

コードサンプル

groupExpanding
継承

コードサンプル

changeLocale
継承

コードサンプル

collapseGroup
継承

コードサンプル

destroy

コードサンプル

expandGroup
継承

コードサンプル

getMultiColumnHeaders
継承

コードサンプル

toggleGroup
継承

コードサンプル

ui-iggrid-multiheader-collapsed

ui-iggrid-indicatorcontainer ui-iggrid-collapsibleindicatorcontainer

ui-iggrid-multiheader-expanded

ui-iggrid-multiheader-cell

Ignite UI for jQuery | API リファレンス

ui.igTreeGridMultiColumnHeaders

コード サンプル

関連トピック

依存関係

継承

コードサンプル