バージョン

igTree におけるノードの構成

トピックの概要

目的

このトピックでは、igTree™ コントロールでノードを構成する方法を紹介します。

このトピックの内容

このトピックは、以下のセクションで構成されます。

前提条件

以下の表は、このトピックを理解するために必要な前提条件です。

「igTree を使用した作業の開始」というトピックを最初にお読みください。

外部リソース

まず以下のセクションを読む必要があります。

igTree 構成の概要

コントロールの構成表

以下の表は、igTree コントロールの構成可能な画面要素とビヘイビアーを示しています。

構成可能な画面要素とビヘイビアー 構成の詳細 構成プロパティ
ノードをプログラム的に展開および縮小する ノードをプログラム的に展開および縮小し、外部操作に応えます。 expand
collapse
expandToNode
展開イベントと縮小イベントを処理する 展開中または縮小中のノードに対して、アプリケーションで他の操作を実行するようイベントを処理できます。 nodeCollapsing
nodeCollapsed
nodeExpanding
nodeExpanded

ノードをプログラム的に展開および縮小する

詳細を展開および縮小する

アプリケーションで、ノードをプログラム的に展開または縮小しなければならないケースがあります。たとえば、ナビゲーションのツリーを使用している場合で、ユーザーがある一部のコンテンツに直接移動した場合、ユーザーが移動した場所がツリー ナビゲーションに反映されなければならない場合があります。以下の例は、igTree コントロールをプログラム的に動作させる方法を示しています。

構成設定を展開および縮小する

以下の表は、要求ビヘイビアーをプロパティ設定にマップしています。プロパティは、igTree コントロール メソッドからアクセスされます。

目的 このメソッドを使用: 提供内容…
ビューにあるノードを展開する expand ノード
ノードを縮小する collapse ノード
子ノードのすべての親ノードを展開する expandToNode ノード

注: 各メソッドは、展開または縮小する igTree ノードのインスタンスを受け入れます。

例: ビューにあるノードを展開する

以下のコードは、現在展開された親ノードにあるノードを展開する方法を示しています。

プロパティ 設定
expand ノード

HTML と ASPX の場合:

$("#tree").igTree("expand", node);

例: ノードを縮小する

以下のコードは、ノードを縮小する方法を示しています。

プロパティ 設定
collapse ノード

HTML と ASPX の場合:

$("#tree").igTree("collapse", node);

例: 子ノードのすべての親ノードを展開する

ノードを表示する必要があるとわかっていても、igTree コントロールの子レベル内に入れ子になっている場合。以下のコードは、ターゲット ノードのすべての親ノードを展開し、expandToNode ビューを使用してビューに入れる方法を示しています。

プロパティ 設定
expandToNode ノード

HTML と ASPX の場合:

$("#tree").igTree("expandToNode", node);

設定参照を展開および縮小する

これらのメソッドの詳細情報は、プロパティ参照セクションのリストを参照してください。

展開イベントと縮小イベントを処理する

イベント詳細を展開および縮小する

ノードの展開または縮小後にカスタム ロジックを実行する場合、これらのイベントを使用できます。名前が -ing で終わるイベントは、ノードの展開中または縮小中の前に発生し、-ed で終わるイベントはノードの展開中または縮小中の後に発生します。

イベント構成設定を展開および縮小する

以下の表は、要求ビヘイビアーをプロパティ設定にマップしています。プロパティは、igTree コントロール メソッドからアクセスされます。

目的 このイベントの使用: それを次に設定...
ノードが展開される前にイベントを処理する nodeExpanding function()
ノードが展開された後にイベントを処理する nodeExpanded function()
ノードが縮小される前にイベントを処理する nodeCollapsing function()
ノードが縮小された後にイベントを処理する nodeCollapsed function()

例: インスタンス化中に展開イベントを構成する

igTree コントロール イベントは、コントロールをインスタンス化しているときに構成できます。イベントは、イベントのパラメーターと UI 引数を受け入れるハンドラー関数を設定することで構成されます。このタイプの構成は、クライアント上でコントロールを構成している場合のみ使用できます。以下のコードは、以下の設定を行った後の展開イベントを処理する方法を示しています。

プロパティ 設定
nodeExpanding function(evt, ui)
nodeExpanded function(evt, ui)

HTML の場合:

$(function () {
    $("#tree").igTree({
        nodeExpanding: function (evt, ui) {

        },
        nodeExpanded: function (evt, ui) {

        }
    });
});

例: bind および live を使用して縮小イベントを構成する

ツリーをインスタンス化した後に、イベント ハンドラーを igTree に添付しなければならない場合があります。初期化後のイベントのバインディングは、igTree コントロールが Ignite UI for MVC ヘルパーを使用してインスタンス化されている場合にイベントを構成する主な方法です。コントロールをインスタンス化した後にイベント ハンドラーの添付を使用する場合、イベント型が必要です。イベント型は、ウィジェット名とイベント名を結合することで決まります。以下のコードは、jQuery bind および live メソッドを使用してイベントを構成する方法を示しています。

メソッド パラメーター
bind() “igtreenodecollapsing” function(evt, ui) { }
live() “igtreenodecollapsed” function(evt, ui) { }

HTML と ASPX の場合:

$("#tree").bind("igtreenodecollapsing", function (evt, ui) {

});

$("#tree").live("igtreenodecollapsed", function (evt, ui) {

});

関連トピック

以下は、その他の役立つトピックです。

オンラインで表示: GitHub