ui.igTree

ui.igTree_image

igTree コントロールはノード画像、チェックボックス、ロードオンデマンド機能をサポートする jQuery ツリー コントロールです。この API のクラス、オプション、イベント、メソッドおよびテーマに関する詳細は、上記の関連するタブを参照してください。

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

この API を使用して作業を開始するための情報はここをクリックしてください。igTree コントロールに必要なスクリプトとテーマを参照する方法については、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 data = [
		{ "Text": "IG Touring", "Value": "IG Touring", "Trips": [
			{ "Text": "Rome", "Value": "Rome", "Packages": [
				{ "Duration": "One Week", "Price": "$1178" }, 
				{ "Duration": "Two Weeks", "Price": "$1997"}] }, 
			{ "Text": "Paris", "Value": "Paris", "Packages": [
				{ "Duration": "One Week", "Price": "$1549.99" }, 
				{ "Duration": "Two Weeks", "Price": "$2799.99"}] 
			} 
		]}];
		$(function () {
			//tree initialization
            $("#tree").igTree({
                singleBranchExpand: true,
                bindings: {
                    textKey: 'Text',
                    valueKey: 'Value',
                    childDataProperty: 'Trips',
                    bindings: {
                        textKey: 'Text',
                        valueKey: 'Value',
                        childDataProperty: 'Packages',
                        bindings: {
                            textKey: 'Duration',
                            valueKey: 'Price'
                        }
                    }
                },
                dataSource: data
            });
		});
    </script>
</head>
<body>
	<div id="tree"></div>
</body>
</html>
	

関連サンプル

関連トピック

依存関係

jquery-1.9.1.js
jquery.ui.core.js
jquery.ui.widget.js
jquery.ui.mouse.js
jquery.ui.draggable.js
jquery.ui.droppable.js
infragistics.templating.js
infragistics.util.js
infragistics.util.jquery.js
infragistics.datasource.js
infragistics.ui.widget.js
infragistics.ui.tree-en.js

継承

  • animationDuration

    タイプ:
    number
    デフォルト:
    200

    展開/折り畳みなどの、各アニメーションの時間を取得または設定します。

    コード サンプル

     
    				//Initialize
    				$(".selector").igTree({
    					animationDuration : 25
    				});
    
    				//Get
    				var animationDuration = $(".selector").igTree("option", "animationDuration");
    
    				//Set
    				$(".selector").igTree("option", "animationDuration", 25);
    			 
  • bindings

    タイプ:
    object
    デフォルト:
    {}

    データ バインディング プロパティおよびキーを取得します。igTree はこのプロパティおよびキーを使用して対応するデータを dataSource から抽出します。

    コード サンプル

     
    				$(".selector").igTree({
    					bindings: {
    						textKey: 'Name',
    						valueKey: 'ID',
    						primaryKey: 'ID',
    						childDataProperty: 'Products',
    						bindings: {
    							textKey: 'Name',
    							valueKey: 'ID',
    							primaryKey: 'ID',
    							childDataProperty: 'Supplier',
    							bindings: {
    								textKey: 'Name',
    								valueKey: 'ID'
    							}
    						}
    					}
    				});
    			 
    • bindings

      タイプ:
      object
      デフォルト:
      {}

      バインドの次のレイヤーを再帰的に取得します。

      コード サンプル

       
      					$(".selector").igTree({
      						bindings: {
      							textKey: "Name",
      							valueKey: "ID",
      							primaryKey: "ID",
      							childDataProperty: "Products",
      							bindings: {
      								textKey: "Name",
      								valueKey: "ID",
      								primaryKey: "ID",
      								childDataProperty: "Supplier",
      								bindings: {
      									textKey: "Name",
      									valueKey: "ID"
      								}
      							}
      						}
      					});
      				 
    • checkedKey

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

      データ ソース プロパティの名前を取得します。このプロパティの値がノードのチェック状態を保存します。チェック状態は文字列列挙体によって表されます。checked|partially checked|unchecked 状態の値は "on|partial|off" です。

      コード サンプル

       
      					$(".selector").igTree({
      						dataSource: data,
      						dataSourceType: "xml",
      						initialExpandDepth: 0,
      						pathSeparator: ".",
      						bindings: {
      							checkedKey: "Checked"
      						}
      					});
      					 
    • childDataProperty

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

      現在のレイヤー ノードの子データが格納されているデータ ソース プロパティの名前を取得します。

      コード サンプル

       
      					$(".selector").igTree({
      						bindings: {
      							textKey: "Name",
      							valueKey: "ID",
      							primaryKey: "ID",
      							childDataProperty: "Products",
      							bindings: {
      								textKey: "Name",
      								valueKey: "ID",
      								primaryKey: "ID",
      								childDataProperty: "Supplier",
      								bindings: {
      									textKey: "Name",
      									valueKey: "ID"
      								}
      							}
      						}
      					});
      				 
    • childDataXPath

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

      子データ ノードへの XPath を取得します。クライアントのみのXML への直接バインディングで使用されます。

      コード サンプル

       
      					$(".selector").igTree({
      						dataSource: data,
      							dataSourceType: "xml",
      							initialExpandDepth: 0,
      							pathSeparator: ".",
      							bindings: {
      								childDataXPath: "Folder"
      							}
      					});
      				 
    • expandedKey

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

      データ ソース プロパティの名前を取得します。このプロパティの値がノードの展開状態を保存します。展開状態はブール値によって表されます。

      コード サンプル

       
      					$(".selector").igTree({
      						dataSource: data,
      						dataSourceType: "xml",
      						initialExpandDepth: 0,
      						pathSeparator: ".",
      						bindings: {
      							expandedKey: "Expanded"
      						}
      					});
      					 
    • imageUrlKey

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

      その値がノード画像の URL として使用される、データ ソース プロパティの名前を取得します。

      コード サンプル

       
      					$(".selector").igTree({
      						bindings: {
      							imageUrlKey: "ImageUrl"
      						}
      					});
      				 
    • imageUrlXPath

      タイプ:
      string
      デフォルト:
      "@ImageUrl"

      画像 URL 属性/ノードへの XPath を取得します。クライアントのみのXML への直接バインディングで使用されます。

      コード サンプル

       
      				//XML node has the following structure:
      				//<Folder Text="Y.Malmsteen" ImageUrl="book.png" Value="Folder" NavigateUrl="http://www.infragistics.com">
      					$(".selector").igTree({
      						dataSource: data,
      						dataSourceType: "xml",
      						initialExpandDepth: 0,
      						pathSeparator: ".",
      						bindings: {
      							imageUrlXPath: "@ImageUrl"
      						}
      				});
      				 
    • navigateUrlKey

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

      その値がノード アンカーの href 属性として使用される、データ ソース プロパティの名前を取得します。

      コード サンプル

       
      					$(".selector").igTree({
      						bindings: {
      							navigateUrlKey: "NavigateUrl"
      						}
      					});
      				 
    • navigateUrlXPath

      タイプ:
      string
      デフォルト:
      "@NavigateUrl"

      ナビゲート URL 属性/ノードへの XPath を取得します。クライアントのみのXML への直接バインディングで使用されます。

      コード サンプル

       
      				//XML node has the following structure:
      				//<Folder Text="Y.Malmsteen" ImageUrl="book.png" Value="Folder" NavigateUrl="http://www.infragistics.com">
      					$(".selector").igTree({
      						dataSource: data,
      						dataSourceType: "xml",
      						initialExpandDepth: 0,
      						pathSeparator: ".",
      						bindings: {
      							navigateUrlXPath: "@NavigateUrl"
      						}
      					});
      				 
    • nodeContentTemplate

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

      現在のバインド レイヤーに関するノード コンテンツ テンプレートを取得します。igTree はノードのコンテンツ テンプレートを生成するために igTemplating を使用します。テンプレートのセットアップの例は以下のブログ (英語) に説明されます。 http://www.infragistics.com/community/blogs/marina_stoyanova/archive/2014/06/17/how-to-use-templates-to-style-the-different-nodes-of-the-ignite-ui-tree-control.aspx.

      コード サンプル

       
      					$(".selector").igTree({
      						dataSource: data,
      						dataSourceType: "xml",
      						initialExpandDepth: 0,
      						pathSeparator: ".",
      						bindings: {
      							nodeContentTemplate: "Stay: ${Duration}"
      						}
      					});
      				 
    • primaryKey

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

      その値がデータのプライマリ キー属性として使用される、データ ソース プロパティの名前を取得します。ロードオンデマンドが有効であり、指定されたノードのパスがインデックスの代わりにプライマリ キーを使用して生成される場合に、このプロパティが使用されます。

      コード サンプル

       
      					$(".selector").igTree({
      						bindings: {
      							textKey: "Name",
      							valueKey: "ID",
      							primaryKey: "ID",
      							childDataProperty: "Products",
      							bindings: {
      								textKey: "Name",
      								valueKey: "ID",
      								primaryKey: "ID",
      								childDataProperty: "Supplier",
      								bindings: {
      									textKey: "Name",
      									valueKey: "ID"
      								}
      							}
      						}
      					});
      				 
    • searchFieldXPath

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

      ルート データ ノードへの XPath を取得します。クライアントのみのXML への直接バインディングで使用されます。

      コード サンプル

       
      				//XML node has the following structure:
      				//<Folder Text="Y.Malmsteen" ImageUrl="book.png" Value="Folder" NavigateUrl="http://www.infragistics.com">
      					$(".selector").igTree({
      						bindings: {
      							searchFieldXPath: "Folder"
      						}
      					});
      				 
    • targetKey

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

      その値がノード アンカーの target 属性として使用される、データ ソース プロパティの名前を取得します。

      コード サンプル

       
      					$(".selector").igTree({
      						bindings: {
      							targetKey: "Target"
      						}
      					});
      				 
    • textKey

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

      その値がノード テキストになる、データ ソース プロパティの名前を取得します。

      コード サンプル

       
      					$(".selector").igTree({
      						bindings: {
      							textKey: "Name",
      							valueKey: "ID",
      							primaryKey: "ID"
      						}
      					});
      				 
    • textXPath

      タイプ:
      string
      デフォルト:
      "@Text"

      テキスト属性/ノードへの XPath を取得します。クライアントのみのXML への直接バインディングで使用されます。

      コード サンプル

       
      				//XML nodes have this structure:
      				//<Folder Text="Y.Malmsteen" ImageUrl="book.png" Value="Folder" NavigateUrl="http://www.infragistics.com">
      					$(".selector").igTree({
      						dataSource: data,
      						dataSourceType: "xml",
      						initialExpandDepth: 0,
      						pathSeparator: ".",
      						bindings: {
      							textXPath: "@Text"
      						}
      					});
      				 
    • valueKey

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

      データ ソース プロパティの名前を取得します。このプロパティの値がノードの値として使用されます。

      コード サンプル

       
      					$(".selector").igTree({
      						bindings: {
      							textKey: "Name",
      							valueKey: "ID",
      							primaryKey: "ID"
      						}
      					});
      				 
    • valueXPath

      タイプ:
      string
      デフォルト:
      "@Value"

      値属性/ノードへの XPath を取得します。クライアントのみのXML への直接バインディングで使用されます。

      コード サンプル

       
      				//XML nodes have this structure:
      				//<Folder Text="Y.Malmsteen" ImageUrl="book.png" Value="Folder" NavigateUrl="http://www.infragistics.com">
      					$(".selector").igTree({
      						dataSource: data,
      						dataSourceType: "xml",
      						initialExpandDepth: 0,
      						pathSeparator: ".",
      						bindings: {
      							valueXPath: "@Value"
      						}
      					});
      				 
  • checkboxMode

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

    ツリー ノードのために描画されるチェックボックスの動作およびタイプを取得します。初期化のみに設定できます。

    メンバー

    • off
    • タイプ:string
    • チェックボックスはオフになり、ツリーに対して描画されません。
    • biState
    • タイプ:string
    • チェックボックスは描画され、2 つの状態 (チェック付きとチェックなし) をサポートします。このモードでは、チェックボックスは上下にカスケード表示されません。
    • triState
    • タイプ:string
    • チェックボックスは描画され、3 つの状態 (チェック付き、部分チェック付き、チェックなし) をサポートします。このモードではチェックボックスは上下にカスケード表示されます。

    コード サンプル

     
    				//Initialize
    				$(".selector").igTree({
    					checkboxMode : "triState"
    				});
    				//Get
    				var checkboxMode = $(".selector").igTree("option", "checkboxMode");
    			 
  • dataSource

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

    igTree データ ソースを取得または設定します。$.ig.DataSource が受け入れる有効なデータ ソース、または $.ig.DataSource 自体のインスタンスを使用できます。
    データ ソースが初期化された後、このオプションは $.ig.HierarchicalDataSource のインスタンスになります。

    コード サンプル

     
    					//Initialize
    					$(".selector").igTree({
    						dataSource : data
    					});
    
    					//Get
    					var dataSource = $(".selector").igTree("option", "dataSource");
    				 
  • dataSourceType

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

    データ ソースのタイプを取得します。値を $.ig.DataSource.settings.type にデリゲートします。データ ソースのタイプ ("json" など) を明示的に設定します。$.ig.DataSource.settings.type のヘルプを参照してください。

    メンバー

    • string
    • タイプ:string
    • データ ソースのタイプを暗示的に指定します。
    • null
    • タイプ:object
    • 型が推定されます。

    コード サンプル

     
    				//Initialize
    				$(".selector").igTree({
    					dataSourceType : "xml"
    				});
    				//Get
    				var type = $(".selector").igTree("option", "dataSourceType");
    			 
  • dataSourceUrl

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

    $.ig.DataSource からデータを要求するには、$.ig.DataSource により承諾されたリモート URL を取得または設定します。

    メンバー

    • string
    • タイプ:string
    • リモート URL を指定します。
    • null
    • タイプ:object
    • このオプションは無視されます。

    コード サンプル

     
    				//Initialize
    				$(".selector").igTree({
    					dataSourceUrl : "data.svc"
    				});
    				//Get
    				var url = $(".selector").igTree("option", "dataSourceUrl");
    			 
  • defaultNodeTarget

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

    ノード アンカーのデフォルトのターゲット属性値を取得します。

    コード サンプル

     
    				//Initialize
    				$(".selector").igTree({
    					defaultNodeTarget : "_blank"
    				});
    
    				//Get
    				var target = $(".selector").igTree("option", "defaultNodeTarget");
    			 
  • dragAndDrop

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

    ドラッグ アンド ドロップ機能が有効かどうかを取得または設定します。

    コード サンプル

     
    				//Initialize
    				$(".selector").igTree({
    					dragAndDrop : true
    				});
    
    				//Get
    				var value = $(".selector").igTree("option", "dragAndDrop");
    
    				//Set
    				$(".selector").igTree("option", "dragAndDrop", false);
    			 
  • dragAndDropSettings

    タイプ:
    object
    デフォルト:
    {}

    ドラッグ アンド ドロップ機能の設定を取得または設定します。

    コード サンプル

     
    				//Initialize
    				$(".selector").igTree({
    					dragAndDropSettings : {
    						allowDrop: true,
    						...
    					}
    				});
    
    				//Get
    				var settings = $(".selector").igTree("option", "dragAndDropSettings");
    
    				//Set
    				settings.allowDrop = {
    					allowDrop: false,
    					...
    					};
    				$(".selector").igTree("option", "dragAndDropSettings", settings);
    			 
    • allowDrop

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

      ウィジェットが別のコントロールからドラッグ アンド ドロップを受け付けるかどうかを取得します。

      コード サンプル

       
      					//Initialize
      					$(".selector").igTree({
      						dragAndDropSettings : {
      							allowDrop: true
      						}
      					});
      
      					//Get
      					var settings = $(".selector").igTree("option", "dragAndDropSettings");
      					var allowDrop = settings.allowDrop;
      
      					//Set
      					settings.allowDrop = false;
      					$(".selector").igTree("option", "dragAndDropSettings", settings);
      				 
    • containment

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

      ドラッグ ヘルパーのコンテナーを取得します。ドラッグ操作でスクロール可能なヘルパーに含まれる領域。 selector ドラッグ可能な要素がセレクターによって検索された最初の要素の境界ボックスに含まれます。要素が見つからなかった場合、コンテナーが設定されません。 element ドラッグ可能な要素がこの要素の境界ボックスに含まれます。

      メンバー

      • boolean
      • タイプ:bool
      • false に設定すると、ドラッグ可能な要素がウィンドウに含まれます。
      • selector
      • タイプ:string
      • ドラッグ可能な要素がセレクターによって検索された最初の要素の境界ボックスに含まれます。要素が見つからなかった場合、コンテナーが設定されません。
      • element
      • タイプ:object
      • ドラッグ可能な要素がこの要素の境界ボックスに含まれます。
      • string
      • タイプ:string
      • 可能な値: "parent"、"document"、"window"。
      • array
      • タイプ:array
      • [ x1, y1, x2, y2 ] の形式で境界ボックスを定義する配列。

      コード サンプル

       
      						//Initialize
      						$(".selector").igTree({
      							dragAndDropSettings : {
      								containment: true
      							}
      						});
      						//Get
      						var settings = $(".selector").igTree("option", "dragAndDropSettings");
      						var containment = settings.containment;
      						//Set
      						settings.containment = false;
      						$(".selector").igTree("option", "dragAndDropSettings", settings);
      					 
    • copyAfterMarkup

      タイプ:
      string
      デフォルト:
      "<div><p><span></span><strong>Copy after</strong> {0}</p></div>"

      「次の項目の後へコピー:」ヘルパーの HTML マークアップを取得します。

      コード サンプル

       
      					//Initialize
      					$(".selector").igTree({
      						dragAndDropSettings : {
      							copyAfterMarkup: "<div class=\"message\"><h3>Copy After</h3><p> {0}</p></div>"
      						}
      					});
      
      					//Get
      					var settings = $(".selector").igTree("option", "dragAndDropSettings");
      					var copyAfterMarkup = settings.copyAfterMarkup;
      
      					//Set
      					settings.copyAfterMarkup = "<div class=\"message\"><h3>Copy After</h3><p> {0}</p></div>";
      					$(".selector").igTree("option", "dragAndDropSettings", settings);
      				 
    • copyBeforeMarkup

      タイプ:
      string
      デフォルト:
      "<div><p><span></span><strong>Copy before</strong> {0}</p></div>"

      「次の項目の前へコピー:」ヘルパーの HTML マークアップを取得します。

      コード サンプル

       
      					//Initialize
      					$(".selector").igTree({
      						dragAndDropSettings : {
      							copyBeforeMarkup: "<div class=\"message\"><h3>Copy Before</h3><p> {0}</p></div>"
      						}
      					});
      
      					//Get
      					var settings = $(".selector").igTree("option", "dragAndDropSettings");
      					var copyBeforeMarkup = settings.copyBeforeMarkup;
      
      					//Set
      					settings.copyBeforeMarkup = "<div class=\"message\"><h3>Copy Before</h3><p> {0}</p></div>";
      					$(".selector").igTree("option", "dragAndDropSettings", settings);
      				 
    • copyBetweenMarkup

      タイプ:
      string
      デフォルト:
      "<div><p><span></span><strong>Copy between</strong> {0} and {1}</p></div>"

      「次の 2 つの項目の間へコピー:」ヘルパーの HTML マークアップを取得します。

      コード サンプル

       
      					//Initialize
      					$(".selector").igTree({
      						dragAndDropSettings : {
      							copyBetweenMarkup: "<div class=\"message\"><h3>Copy Between</h3><p> {0} and {1}</p></div>"
      						}
      					});
      
      					//Get
      					var settings = $(".selector").igTree("option", "dragAndDropSettings");
      					var copyBetweenMarkup = settings.copyBetweenMarkup;
      
      					//Set
      					settings.copyBetweenMarkup = "<div class=\"message\"><h3>Copy Between</h3><p> {0} and {1}</p></div>";
      					$(".selector").igTree("option", "dragAndDropSettings", settings);
      				 
    • copyToMarkup

      タイプ:
      string
      デフォルト:
      "<div><p><span></span><strong>Copy to</strong> {0}</p></div>"

      「次の位置へコピー:」ヘルパーの HTML マークアップを取得します。

      コード サンプル

       
      					//Initialize
      					$(".selector").igTree({
      						dragAndDropSettings : {
      							copyToMarkup: "<div class=\"message\"><h3>Copy To</h3><p> {0}</p></div>"
      						}
      					});
      
      					//Get
      					var settings = $(".selector").igTree("option", "dragAndDropSettings");
      					var copyToMarkup = settings.copyToMarkup;
      
      					//Set
      					settings.copyToMarkup = "<div class=\"message\"><h3>Copy To</h3><p> {0}</p></div>";
      					$(".selector").igTree("option", "dragAndDropSettings", settings);
      				 
    • customDropValidation

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

      カスタム ドロップ ポイント検証のメソッドを取得します。この関数から True を返すと、ドロップ ポイントを有効にします。False を返すと、無効にします。

      メンバー

      • function
      • タイプ:function
      • ドロップ ポイントを検証するために使用される関数。
      • null
      • タイプ:object
      • 定義済みの検証のみが適用されます。

      コード サンプル

       
      						//Initialize
      						$(".selector").igTree({
      							dragAndDropSettings : {
      								customDropValidation: function() {}
      							}
      						});
      						//Get
      						var settings = $(".selector").igTree("option", "dragAndDropSettings");
      						var customDropValidation = settings.customDropValidation;
      						//Set
      						settings.customDropValidation = function() {};
      						$(".selector").igTree("option", "dragAndDropSettings", settings);
      					 
    • dragAndDropMode

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

      ドラッグ アンド ドロップ モードを取得します。

      メンバー

      • default
      • タイプ:string
      • Ctrl キーを押すときに「コピー」を実行します。それ以外の場合、「移動」を実行します。
      • copy
      • タイプ:string
      • ドラッグされたノードのコピーをドロップ位置に作成します。
      • move
      • タイプ:string
      • ドラッグされたノードをドロップ位置に移動します。

      コード サンプル

       
      					//Initialize
      					$(".selector").igTree({
      						dragAndDropSettings : {
      							dragAndDropMode: "copy"
      						}
      					});
      					//Get
      					var settings = $(".selector").igTree("option", "dragAndDropSettings");
      					var dragAndDropMode = settings.dragAndDropMode;
      					//Set
      					settings.dragAndDropMode = "copy";
      					$(".selector").igTree("option", "dragAndDropSettings", settings);
      				 
    • dragOpacity

      タイプ:
      number
      デフォルト:
      0.75

      ドラッグ ヘルパーの不透明を取得します。0 は完全に透明で、1 は完全に不透です。

      コード サンプル

       
      					//Initialize
      					$(".selector").igTree({
      						dragAndDropSettings : {
      							dragOpacity: 0.25
      						}
      					});
      
      					//Get
      					var settings = $(".selector").igTree("option", "dragAndDropSettings");
      					var dragOpacity = settings.dragOpacity;
      
      					//Set
      					settings.dragOpacity = 0.5;
      					$(".selector").igTree("option", "dragAndDropSettings", settings);
      				 
    • dragStartDelay

      タイプ:
      number
      デフォルト:
      200

      マウスダウンとドラッグの開始の遅延時間を取得します。より小さい値はノードでドラッグの精度を増加し、選択を妨げる可能性があります。

      コード サンプル

       
      					//Initialize
      					$(".selector").igTree({
      						dragAndDropSettings : {
      							dragStartDelay: 400
      						}
      					});
      
      					//Get
      					var settings = $(".selector").igTree("option", "dragAndDropSettings");
      					var dragStartDelay = settings.dragStartDelay;
      
      					//Set
      					settings.dragStartDelay = 500;
      					$(".selector").igTree("option", "dragAndDropSettings", settings);
      				 
    • expandDelay

      タイプ:
      number
      デフォルト:
      1000

      expandOnDragOver が true の場合、親ノードをホバーしてからドラッグでノードを展開するまでの遅延を取得します。

      コード サンプル

       
      					//Initialize
      					$(".selector").igTree({
      						dragAndDropSettings : {
      							expandDelay: 1500
      						}
      					});
      
      					//Get
      					var settings = $(".selector").igTree("option", "dragAndDropSettings");
      					var expandDelay = settings.expandDelay;
      
      					//Set
      					settings.expandDelay = 2000;
      					$(".selector").igTree("option", "dragAndDropSettings", settings);
      				 
    • expandOnDragOver

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

      子を持つ縮小されたノードの上にドラッグすると、ノードが展開するかどうかを取得します。

      コード サンプル

       
      					//Initialize
      					$(".selector").igTree({
      						dragAndDropSettings : {
      							expandOnDragOver: false
      						}
      					});
      
      					//Get
      					var settings = $(".selector").igTree("option", "dragAndDropSettings");
      					var expand = settings.expandOnDragOver;
      
      					//Set
      					settings.expandOnDragOver = false;
      					$(".selector").igTree("option", "dragAndDropSettings", settings);
      				 
    • helper

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

      ドラッグ操作で描画されるヘルパーのタイプを取得します。

      メンバー

      • function
      • タイプ:function
      • ドラッグで使用する DOMElement を返す関数。
      • default
      • タイプ:string
      • デフォルトの igTree ヘルパーを描画します。

      コード サンプル

       
      					//Initialize
      					$(".selector").igTree({
      						dragAndDropSettings : {
      							helper: "myHelper"
      						}
      					});
      					//Get
      					var settings = $(".selector").igTree("option", "dragAndDropSettings");
      					var helper = settings.helper;
      					//Set
      					settings.helper = "myHelper";
      					$(".selector").igTree("option", "dragAndDropSettings", settings);
      				 
    • invalidMoveToMarkup

      タイプ:
      string
      デフォルト:
      "<div><p><span></span><strong>{0}</strong></p></div>"

      無効なヘルパーの HTML マークアップを取得します。

      コード サンプル

       
      					//Initialize
      					$(".selector").igTree({
      						dragAndDropSettings : {
      							invalidMoveToMarkup: "<div class=\"message\">Invalid</div>"
      						}
      					});
      
      					//Get
      					var settings = $(".selector").igTree("option", "dragAndDropSettings");
      					var invalidMoveToMarkup = settings.invalidMoveToMarkup;
      
      					//Set
      					settings.invalidMoveToMarkup = "<div class=\"message\">Invalid</div>";
      					$(".selector").igTree("option", "dragAndDropSettings", settings);
      				 
    • moveAfterMarkup

      タイプ:
      string
      デフォルト:
      "<div><p><span></span><strong>Move after</strong> {0}</p></div>"

      「次の項目の後へ移動:」ヘルパーの HTML マークアップを取得します。

      コード サンプル

       
      					//Initialize
      					$(".selector").igTree({
      						dragAndDropSettings : {
      							moveAfterMarkup: "<div class=\"message\"><h3>Move After</h3><p> {0}</p></div>"
      						}
      					});
      
      					//Get
      					var settings = $(".selector").igTree("option", "dragAndDropSettings");
      					var moveAfterMarkup = settings.moveAfterMarkup;
      
      					//Set
      					settings.moveAfterMarkup = "<div class=\"message\"><h3>Move After</h3><p> {0}</p></div>";
      					$(".selector").igTree("option", "dragAndDropSettings", settings);
      				 
    • moveBeforeMarkup

      タイプ:
      string
      デフォルト:
      "<div><p><span></span><strong>Move before</strong> {0}</p></div>"

      「次の項目の前へ移動:」ヘルパーの HTML マークアップを取得します。

      コード サンプル

       
      					//Initialize
      					$(".selector").igTree({
      						dragAndDropSettings : {
      							moveBeforeMarkup: "<div class=\"message\"><h3>Move After</h3><p> {0}</p></div>"
      						}
      					});
      
      					//Get
      					var settings = $(".selector").igTree("option", "dragAndDropSettings");
      					var moveBeforeMarkup = settings.moveBeforeMarkup;
      
      					//Set
      					settings.moveBeforeMarkup = "<div class=\"message\"><h3>Move Before</h3><p> {0}</p></div>";
      					$(".selector").igTree("option", "dragAndDropSettings", settings);
      				 
    • moveBetweenMarkup

      タイプ:
      string
      デフォルト:
      "<div><p><span></span><strong>Move between</strong> {0} and {1}</p></div>"

      「次の 2 つの項目の間へ移動:」ヘルパーの HTML マークアップを取得します。

      コード サンプル

       
      					//Initialize
      					$(".selector").igTree({
      						dragAndDropSettings : {
      							moveBetweenMarkup: "<div class=\"message\"><h3>Move Between</h3><p> {0}</p></div>"
      						}
      					});
      
      					//Get
      					var settings = $(".selector").igTree("option", "dragAndDropSettings");
      					var moveBetweenMarkup = settings.moveBetweenMarkup;
      
      					//Set
      					settings.moveBetweenMarkup = "<div class=\"message\"><h3>Move Between</h3><p> {0} and {1}</p></div>";
      					$(".selector").igTree("option", "dragAndDropSettings", settings);
      				 
    • moveToMarkup

      タイプ:
      string
      デフォルト:
      "<div><p><span></span><strong>Move to</strong> {0}</p></div>"

      「次の位置へ移動:」ヘルパーの HTML マークアップを取得します。

      コード サンプル

       
      					//Initialize
      					$(".selector").igTree({
      						dragAndDropSettings : {
      							moveToMarkup: "<div class=\"message\"><h3>Move To</h3><p> {0}</p></div>"
      						}
      					});
      
      					//Get
      					var settings = $(".selector").igTree("option", "dragAndDropSettings");
      					var moveBetweenMarkup = settings.moveBetweenMarkup;
      
      					//Set
      					settings.moveBetweenMarkup = "<div class=\"message\"><h3>Move Between</h3><p> {0} and {1}</p></div>";
      					$(".selector").igTree("option", "dragAndDropSettings", settings);
      				 
    • revert

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

      無効なドロップの場合、ヘルパーを元の位置に戻すかどうかを取得します。

      コード サンプル

       
      					//Initialize
      					$(".selector").igTree({
      						dragAndDropSettings : {
      							revert: false
      						}
      					});
      
      					//Get
      					var settings = $(".selector").igTree("option", "dragAndDropSettings");
      					var revert = settings.revert;
      
      					//Set
      					settings.revert = false;
      					$(".selector").igTree("option", "dragAndDropSettings", settings);
      				 
    • revertDuration

      タイプ:
      number
      デフォルト:
      500

      元に戻すアニメーションの期間を取得します。

      コード サンプル

       
      					//Initialize
      					$(".selector").igTree({
      						dragAndDropSettings : {
      							revertDuration: 1000
      						}
      					});
      
      					//Get
      					var settings = $(".selector").igTree("option", "dragAndDropSettings");
      					var revertDuration = settings.revertDuration;
      
      					//Set
      					settings.revertDuration = 1000;
      					$(".selector").igTree("option", "dragAndDropSettings", settings);
      				 
    • zIndex

      タイプ:
      number
      デフォルト:
      10

      ドラッグ ヘルパーの z インデックスを取得します。

      コード サンプル

       
      					//Initialize
      					$(".selector").igTree({
      						dragAndDropSettings : {
      							zIndex: 20
      						}
      					});
      
      					//Get
      					var settings = $(".selector").igTree("option", "dragAndDropSettings");
      					var zIndex = settings.zIndex;
      
      					//Set
      					settings.zIndex = 20;
      					$(".selector").igTree("option", "dragAndDropSettings", settings);
      				 
  • height

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

    コントロール コンテナーの高さを取得または設定します。

    メンバー

    • string
    • タイプ:string
    • ウィジェットの高さはピクセル (px) およびパーセント (%) で設定できます (%)。
    • number
    • タイプ:number
    • ウィジェットの高さをピクセル単位の数値で設定できます。
    • null
    • タイプ:object
    • コンテナーに高さが適用されていないし、ブラウザーの描画エンジンのデフォルトとして描画されます。

    コード サンプル

     
    				//Initialize
    				$(".selector").igTree({
    					height : 400
    				});
    				//Get
    				var height = $(".selector").igTree("option", "height");
    				//Set
    				$(".selector").igTree("option", "height", 400);
    			 
  • hotTracking

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

    ノードがホバー可能かどうかを取得または設定します。このオプションを false に設定すると、ツリーはノードがホバーされたときにノードにホバー スタイルを適用しません。

    コード サンプル

     
    				//Initialize
    				$(".selector").igTree({
    					hotTracking : false
    				});
    
    				//Get
    				var tracking = $(".selector").igTree("option", "hotTracking");
    
    				//Set
    				$(".selector").igTree("option", "hotTracking", false);
    			 
  • initialExpandDepth

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

    最初描画で igTree が展開される最初深さを取得します。

    コード サンプル

     
    				//Initialize
    				$(".selector").igTree({
    					initialExpandDepth : 1
    				});
    
    				//Get
    				var expandDepth = $(".selector").igTree("option", "initialExpandDepth");
    			 
  • language
    継承

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

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

    コード サンプル

     
    					//Initialize
    				$(".selector").igTree({
    					language: "ja"
    				});
    
    				// Get
    				var language = $(".selector").igTree("option", "language");
    
    				// Set
    				$(".selector").igTree("option", "language", "ja");
    			 
  • leafNodeImageClass

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

    すべてのリーフ ノードに適用される CSS クラスを取得または設定します。

    メンバー

    • string
    • タイプ:string
    • 子を持たない各ノードに対して描画される CSS スプライトを持つ指定されたクラス (leafNodeImageUrl と leafNodeImageClass の両方を定義した場合、leafNodeImageUrl に優先があります)。
    • null
    • タイプ:object
    • このオプションは無視されます。

    コード サンプル

     
    				//Initialize
    				$(".selector").igTree({
    					leafNodeImageClass : "leafnodeimage"
    				});
    				//Get
    				var class = $(".selector").igTree("option", "leafNodeImageClass");
    				// Set - works only if an image was also set on initialization.
    				// Throws an error otherwise, as the element holding the image source is missing.
    				$(".selector").igTree("option", "leafNodeImageClass", "altleafnodeimage");
    			 
  • leafNodeImageTooltip

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

    すべてのリーフ ノード画像に適用されるツールチップを取得または設定します。

    メンバー

    • string
    • タイプ:string
    • 子を持たない各ノードに対して描画されるツールチップを指定します。
    • null
    • タイプ:object
    • このオプションは無視されます。

    コード サンプル

     
    				//Initialize
    				$(".selector").igTree({
    					leafNodeImageTooltip : "Book"
    				});
    				//Get
    				var text = $(".selector").igTree("option", "leafNodeImageTooltip");
    				// Set - works only if an image was also set on initialization.
    				// Throws an error otherwise, as the element holding the image source is missing.
    				$(".selector").igTree("option", "leafNodeImageTooltip", "Magazine");
    			 
  • leafNodeImageUrl

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

    すべてのリーフ ノードに適用される画像 URL を取得または設定します。

    メンバー

    • string
    • タイプ:string
    • 指定された URL を持つ画像が子を持たない各ノードに対して描画されます (leafNodeImageUrl と leafNodeImageClass の両方を定義した場合、leafNodeImageUrl に優先があります)。
    • null
    • タイプ:object
    • このオプションは無視されます。

    コード サンプル

     
    				//Initialize
    				$(".selector").igTree({
    					leafNodeImageUrl : "images/book.png"
    				});
    				//Get
    				var url = $(".selector").igTree("option", "leafNodeImageUrl");
    				// Set - works only if an image was also set on initialization.
    				// Throws an error otherwise, as the element holding the image source is missing.
    				$(".selector").igTree("option", "leafNodeImageUrl", "images/magazine.png");
    			 
  • loadOnDemand

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

    すべてのデータを最初にバインドするか、または各子コレクションを展開に応じてバインドするかどうかを取得します。

    コード サンプル

     
    				//Initialize
    				$(".selector").igTree({
    					loadOnDemand : true
    				});
    
    				//Get
    				var loadOnDemand = $(".selector").igTree("option", "loadOnDemand");
    			 
  • locale
    継承

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

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

    コード サンプル

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

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

    すべての親ノードに適用される CSS クラスを取得または設定します。

    メンバー

    • string
    • タイプ:string
    • 子を持つ各ノードに対して描画される CSS スプライトを持つ指定されたクラス (parentNodeImageUrl と parentNodeImageClass の両方を定義した場合、parentNodeImageUrl に優先があります)。
    • null
    • タイプ:object
    • このオプションは無視されます。

    コード サンプル

     
    				//Initialize
    				$(".selector").igTree({
    					parentNodeImageClass : "folderimage"
    				});
    				//Get
    				var class = $(".selector").igTree("option", "parentNodeImageClass");
    				// Set - works only if an image was also set on initialization.
    				// Throws an error otherwise, as the element holding the image source is missing.
    				$(".selector").igTree("option", "parentNodeImageClass", "altfolderimage");
    			 
  • parentNodeImageTooltip

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

    すべての親ノード画像に適用されるツールチップを取得または設定します。

    メンバー

    • string
    • タイプ:string
    • 子を持つ各ノードに対して描画されるツールチップを指定します。
    • null
    • タイプ:object
    • このオプションは無視されます。

    コード サンプル

     
    				//Initialize
    				$(".selector").igTree({
    					parentNodeImageTooltip : "Folder"
    				});
    				//Get
    				var text = $(".selector").igTree("option", "parentNodeImageTooltip");
    				// Set - works only if an image was also set on initialization.
    				// Throws an error otherwise, as the element holding the image source is missing.
    				$(".selector").igTree("option", "parentNodeImageTooltip", "rootFolder");
    			 
  • parentNodeImageUrl

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

    すべての親ノードに適用される画像 URL を取得または設定します。

    メンバー

    • string
    • タイプ:string
    • 指定された URL を持つ画像が子を持つ各ノードに対して描画されます (parentNodeImageUrl と parentNodeImageClass の両方を定義した場合、parentNodeImageUrl に優先があります)。
    • null
    • タイプ:object
    • このオプションは無視されます。

    コード サンプル

     
    				//Initialize
    				$(".selector").igTree({
    					parentNodeImageUrl : "images/folder.png"
    				});
    				//Get
    				var url = $(".selector").igTree("option", "parentNodeImageUrl");
    				// Set - works only if an image was also set on initialization.
    				// Throws an error otherwise, as the element holding the image source is missing.
    				$(".selector").igTree("option", "parentNodeImageUrl", "images/photo.png");
    			 
  • pathSeparator

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

    ノード data-path 属性の区切り文字を取得します。

    コード サンプル

     
    				//Initialize
    				$(".selector").igTree({
    					pathSeparator : "."
    				});
    
    				//Get
    				var pathSeparator = $(".selector").igTree("option", "pathSeparator");
    			 
  • regional
    継承

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

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

    コード サンプル

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

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

    リモート要求で使用される HTTP 動詞を取得します。要求を dataSourceUrl に送信するために使用される HTTP 動詞を指定します。

    コード サンプル

     
    				//Initialize
    				$(".selector").igTree({
    					requestType : "GET"
    				});
    
    				//Get
    				var url = $(".selector").igTree("option", "requestType");
    			 
  • responseContentType

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

    リモート データ ソース応答のコンテンツ タイプを取得します。dataSourceUrl からの応答のコンテンツ タイプ。 http://api.jquery.com/jQuery.ajax/ => contentType を参照してください。

    コード サンプル

     
    				//Initialize
    				$(".selector").igTree({
    					responseContentType : "application/json"
    				});
    
    				//Get
    				var url = $(".selector").igTree("option", "responseContentType");
    			 
  • responseDataKey

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

    リモート データ ソースがデータを書く位置の JSON キーを取得します。値を $.ig.DataSource.settings.responseDataKey にデリゲートします。$.ig.DataSource.settings.responseDataKey のヘルプを参照してください。

    メンバー

    • string
    • タイプ:string
    • 応答がラップされる場合に、データ レコードが保持されるプロパティの名前を指定します。
    • null
    • タイプ:object
    • このオプションは無視されます。

    コード サンプル

     
    				//Initialize
    				$(".selector").igTree({
    					responseDataKey : "d.results"
    				});
    				//Get
    				var responseDataKey = $(".selector").igTree("option", "responseDataKey");
    			 
  • responseDataType

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

    リモート データ ソース応答のデータ タイプを取得します。値を $.ig.DataSource.settings.responseDataType にデリゲートします。$.ig.DataSource.settings.responseDataType のヘルプを参照してください。

    メンバー

    • string
    • タイプ:string
    • URL がデータ ソースとして設定された場合の応答タイプ。 http://api.jquery.com/jQuery.ajax/ => dataType を参照してください。
    • null
    • タイプ:object
    • 型が推定されます。

    コード サンプル

     
    				//Initialize
    				$(".selector").igTree({
    					responseDataType : "json"
    				});
    				//Get
    				var responseDataType = $(".selector").igTree("option", "responseDataType");
    			 
  • singleBranchExpand

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

    一度に展開するブランチを 1 つ以上取得または設定します。true に設定された場合、ツリーの各レベルでは、一度に展開できるブランチは 1 つのみになります。それ以外の場合、複数のブランチを一度に展開できます。

    コード サンプル

     
    				//Initialize
    				$(".selector").igTree({
    					singleBranchExpand : true
    				});
    
    				//Get
    				var singleBranchExpand = $(".selector").igTree("option", "singleBranchExpand");
    
    				//Set
    				$(".selector").igTree("option", "singleBranchExpand", true);
    			 
  • updateUrl

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

    更新要求先の URL を取得します。

    コード サンプル

     
    				//Initialize
    				$(".selector").igTree({
    					updateUrl: "http://example.com/update"
    				});
    
    				//Get
    				var updateUrl = $(".selector").igTree("option", "updateUrl");
    
    				//Set
    				$(".selector").igTree("option", "updateUrl", "http://example.com/update");
    			 
  • width

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

    コントロール コンテナーの幅を取得または設定します。

    メンバー

    • string
    • タイプ:string
    • ウィジェットの幅をピクセル (px) またはパーセンテージ (%) に設定できます。
    • number
    • タイプ:number
    • ウィジェットの幅は数値としてピクセルで設定できます。
    • null
    • タイプ:object
    • コンテナーに幅が適用されていないし、ブラウザーの描画エンジンにデフォルトで描画されます。

    コード サンプル

     
    				//Initialize
    				$(".selector").igTree({
    					width : "300px"
    				});
    				//Get
    				var width = $(".selector").igTree("option", "width");
    				//Set
    				$(".selector").igTree("option", "width", "300px");
    			 

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

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

詳細の表示
  • dataBinding

    キャンセル可能:
    false

    データバインディングが実行される前に発生します。

    • evt
      タイプ: Event

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

    • ui
      タイプ: Object

        • owner
          タイプ: Object

          データバインドを実行するツリーへの参照を取得します。

    コード サンプル

     
    				//Bind after initialization
    				$(document).on("igtreedatabinding", ".selector", function (evt, ui) {
    					//return reference to igTree
    					ui.owner;
    				});
    
    				//Initialize
    				$(".selector").igTree({
    					dataBinding: function(evt, ui) {...}
    				});
    			 
  • dataBound

    キャンセル可能:
    false

    データバインディングが完了した後に発生します。

    • evt
      タイプ: Event

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

    • ui
      タイプ: Object

        • owner
          タイプ: Object

          データバインドを実行するツリーへの参照を取得します。

        • dataView
          タイプ: Object

          ツリーにバインドされたデータへの参照を取得します。

    コード サンプル

     
    				//Bind after initialization
    				$(document).on("igtreedatabound", ".selector", function (evt, ui) {
    					//return reference to igTree
    					ui.owner;
    					//return reference to the data the tree has been databound to.
    					ui.dataView;
    				});
    
    				//Initialize
    				$(".selector").igTree({
    					dataBound: function(evt, ui) {...}
    				});
    			 
  • drag

    キャンセル可能:
    true

    ノードをドラッグすると発生します。

    • evt
      タイプ: Event

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

    • ui
      タイプ: Object

        • path
          タイプ: String

          ノードの data-path 属性を取得します。

        • element
          タイプ: jQuery

          ノードの jQuery 要素への参照を取得します。

        • data
          タイプ: Object

          ノード データを取得します。

        • binding
          タイプ: Object

          ドラッグされたノードのレベルにあるバインド オブジェクトへの参照を取得します。

        • helper
          タイプ: jQuery

          ヘルパーへの参照を取得します。

        • offset
          タイプ: Object

          オフセットへの参照を取得します。

        • orginalPosition
          タイプ: Object

          ドラッグ可能な要素 (ノード) の元の位置への参照を取得します。

        • position
          タイプ: Object

          ドラッグ可能な要素の現在の位置への参照を取得します。

    コード サンプル

     
    				//Bind after initialization
    				$(document).on("igtreedrag", ".selector", function (evt, ui) {
    					//return reference to the binding.
    					ui.binding;
    					//return reference to the data.
    					ui.data;
    					//return reference to the element.
    					ui.element;
    					//return reference to the helper.
    					ui.helper;
    					//return reference to the offset.
    					ui.offest;
    					//return to get a reference to the original position of the draggable element (the node).
    					ui.orginalPosition
    					//return reference to the node path.
    					ui.path
    					//return reference to the current position of the draggable element.
    					ui.position
    				});
    
    				//Initialize
    				$(".selector").igTree({
    					drag: function(evt, ui) {...}
    				});
    
    			 
  • dragStart

    キャンセル可能:
    true

    ノードのドラッグ開始で発生します。

    • evt
      タイプ: Event

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

    • ui
      タイプ: Object

        • path
          タイプ: String

          ノードの data-path 属性を取得します。

        • element
          タイプ: jQuery

          ノードの jQuery 要素への参照を取得します。

        • data
          タイプ: Object

          ノード データを取得します。

        • binding
          タイプ: Object

          ドラッグされたノードのレベルにあるバインド オブジェクトへの参照を取得します。

        • helper
          タイプ: jQuery

          ヘルパーへの参照を取得します。

        • offset
          タイプ: Object

          オフセットへの参照を取得します。

        • orginalPosition
          タイプ: Object

          ドラッグ可能な要素 (ノード) の元の位置への参照を取得します。

        • position
          タイプ: Object

          ドラッグ可能な要素の現在の位置への参照を取得します。

    コード サンプル

     
    				//Bind after initialization
    				$(document).on("igtreedragstart", ".selector", function (evt, ui) {
    					//return reference to the binding.
    					ui.binding;
    					//return reference to the data.
    					ui.data;
    					//return reference to the element.
    					ui.element;
    					//return reference to the helper.
    					ui.helper;
    					//return reference to the offset.
    					ui.offest;
    					//return to get a reference to the original position of the draggable element (the node).
    					ui.orginalPosition
    					//return reference to the node path.
    					ui.path
    					//return reference to the current position of the draggable element.
    					ui.position
    				});
    
    				//Initialize
    				$(".selector").igTree({
    					dragStart: function(evt, ui) {...}
    				});
    			 
  • dragStop

    キャンセル可能:
    false

    ドラッグ操作が完了した後に発生します。

    • evt
      タイプ: Event

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

    • ui
      タイプ: Object

        • helper
          タイプ: jQuery

          ヘルパーへの参照を取得します。

        • offset
          タイプ: Object

          オフセットへの参照を取得します。

        • orginalPosition
          タイプ: Object

          ドラッグ可能な要素 (ノード) の元の位置への参照を取得します。

        • position
          タイプ: Object

          ドラッグ可能な要素の現在の位置への参照を取得します。

    コード サンプル

     
    				//Bind after initialization
    				$(document).on("igtreedragstop", ".selector", function (evt, ui) {
    					ui.offest;
    					//return to get a reference to the original position of the draggable element (the node).
    					ui.orginalPosition
    					//return reference to the node path.
    					ui.path
    					//return reference to the current position of the draggable element.
    					ui.position
    				});
    
    				//Initialize
    				$(".selector").igTree({
    					dragStop: function(evt, ui) {...}
    				});
    			 
  • nodeCheckstateChanged

    キャンセル可能:
    false

    ノードの checkstate が変更された後に発生します。

    • evt
      タイプ: Event

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

    • ui
      タイプ: Object

        • owner
          タイプ: Object

          ツリーへの参照を取得します。

        • node
          タイプ: Object

          チェックボックスの操作が行われているノード オブジェクトへの参照を取得します。

        • newState
          タイプ: String

          チェックボックスに適用された新しい状態を取得します。

        • newCheckedNodes
          タイプ: Array

          すべてのチェック ノードのコレクションを取得します。

        • newPartiallyCheckedNodes
          タイプ: Array

          部分チェック ノードのコレクションを取得します。

    コード サンプル

     
    				//Bind after initialization
    				$(document).on("igtreenodecheckstatechanged", ".selector", function (evt, ui) {
    					//return reference to igTree
    					ui.owner;
    					//return reference to the node object the checkbox of which is being interacted with.
    					ui.node;
    					//return the new current state of the checkbox.
    					ui.newState;
    					//return the collection of all checked nodes.
    					ui.currentCheckedNodes;
    					//return the collection of all partially checked nodes.
    					ui.newPartiallyCheckedNodes;
    				});
    
    				//Initialize
    				$(".selector").igTree({
    					nodeCheckstateChanged: function(evt, ui) {...}
    				});
    			 
  • nodeCheckstateChanging

    キャンセル可能:
    true

    ノードのチェックボックス状態が変更される前に発生します。

    • evt
      タイプ: Event

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

    • ui
      タイプ: Object

        • owner
          タイプ: Object

          ツリーへの参照を取得します。

        • node
          タイプ: Object

          チェックボックスの操作が行われているノード オブジェクトへの参照を取得します。

        • currentState
          タイプ: String

          チェックボックスの現在の状態を取得します。

        • newState
          タイプ: String

          チェックボックスに適用する新しい状態を取得します。

        • currentCheckedNodes
          タイプ: Array

          新しい状態が適用される前に完全チェック ノードのコレクションを取得します。

    コード サンプル

     
    				//Bind after initialization
    				$(document).on("igtreenodecheckstatechanging", ".selector", function (evt, ui) {
    					//return reference to igTree
    					ui.owner;
    					//return reference to the node object the checkbox of which is being interacted with.
    					ui.node;
    					//return the current state of the checkbox.
    					ui.currentState
    					//return the new current state of the checkbox.
    					ui.newState;
    					//return the collection of all checked nodes.
    					ui.currentCheckedNodes;
    				});
    
    				//Initialize
    				$(".selector").igTree({
    					nodeCheckstateChanging: function(evt, ui) {...}
    				});
    			 
  • nodeClick

    キャンセル可能:
    false

    ノードをクリックすると発生します。

    • evt
      タイプ: Event

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

    • ui
      タイプ: Object

        • owner
          タイプ: Object

          ツリーへの参照を取得します。

        • node
          タイプ: Object

          クリックされるノード オブジェクトへの参照を取得します。

    コード サンプル

     
    				//Bind after initialization
    				$(document).on("igtreenodeclick", ".selector", function (evt, ui) {
    					//return reference to igTree
    					ui.owner;
    					//return reference to the node object being clicked.
    					ui.node;
    				});
    
    				//Initialize
    				$(".selector").igTree({
    					nodeClick: function(evt, ui) {...}
    				});
    			 
  • nodeCollapsed

    キャンセル可能:
    false

    ノードが折り畳まれた後に発生します。

    • evt
      タイプ: Event

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

    • ui
      タイプ: Object

        • owner
          タイプ: Object

          ツリーへの参照を取得します。

        • node
          タイプ: Object

          折りたたまれたノード オブジェクトへの参照を取得します。

    コード サンプル

     
    				//Bind after initialization
    				$(document).on("igtreenodecollapsed", ".selector", function (evt, ui) {
    					//return reference to igTree
    					ui.owner;
    					//return reference to the collapsed node object.
    					ui.node;
    				});
    
    				//Initialize
    				$(".selector").igTree({
    					nodeCollapsed: function(evt, ui) {...}
    				});
    			 
  • nodeCollapsing

    キャンセル可能:
    true

    ノードが折り畳まれる前に発生します。

    • evt
      タイプ: Event

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

    • ui
      タイプ: Object

        • owner
          タイプ: Object

          ツリーへの参照を取得します。

        • node
          タイプ: Object

          折りたたまれるノード オブジェクトへの参照を取得します。

    コード サンプル

     
    				//Bind after initialization
    				$(document).on("igtreenodecollapsing", ".selector", function (evt, ui) {
    					//return reference to igTree
    					ui.owner;
    					//return reference to the node object about to collapse.
    					ui.node;
    				});
    
    				//Initialize
    				$(".selector").igTree({
    					nodeCollapsing: function(evt, ui) {...}
    				});
    			 
  • nodeDoubleClick

    キャンセル可能:
    false

    ノードをダブルクリックすると発生します。

    • evt
      タイプ: Event

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

    • ui
      タイプ: Object

        • path
          タイプ: String

          ダブルクリックしたノードの data-path 属性を取得します。

        • element
          タイプ: jQuery

          ダブルクリックしたノードの jQuery 要素への参照を取得します。

        • data
          タイプ: Object

          ノード データを取得します。

        • binding
          タイプ: Object

          ダブルクリックしたノードのレベルにあるバインド オブジェクトへの参照を取得します。

    コード サンプル

     
    				//Bind after initialization
    				$(document).on("igtreenodedoubleclick", ".selector", function (evt, ui) {
    					//return a reference to the path of the double clicked node.
    					ui.path;
    					//return a reference to the jQuery element of the double clicked node.
    					ui.element;
    					//return the node data.
    					ui.data;
    					//return a reference to the bindings object for the level at which the double clicked node is located.
    					ui.binding;
    				});
    
    				//Initialize
    				$(".selector").igTree({
    					nodeDoubleClick: function(evt, ui) {...}
    				});
    			 
  • nodeDropped

    キャンセル可能:
    false

    ノードがドロップした後に発生します。

    • evt
      タイプ: Event

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

    • ui
      タイプ: Object

        • path
          タイプ: String

          ターゲット ノードのレベルにあるバインド オブジェクトへの参照を取得します。

        • element
          タイプ: jQuery

          ノードの jQuery 要素への参照を取得します。

        • data
          タイプ: Object

          ターゲット ノード データへの参照を取得します。

        • binding
          タイプ: Object

          ターゲット ノードのレベルにあるバインド オブジェクトへの参照を取得します。

        • helper
          タイプ: jQuery

          ヘルパーへの参照を取得します。

        • offset
          タイプ: Object

          オフセットへの参照を取得します。

        • position
          タイプ: Object

          ドラッグ可能な要素の現在の位置への参照を取得します。

        • draggable
          タイプ: jQuery

          ドラッグ可能な要素 (ノード) への参照を取得します。

    コード サンプル

     
    				//Bind after initialization
    				$(document).on("igtreenodedropped", ".selector", function (evt, ui) {
    					//return reference to the binding.
    					ui.binding;
    					//return reference to the data.
    					ui.data;
    					//return reference to the draggable element (the node).
    					ui.draggable
    					//return reference to the element.
    					ui.element;
    					//return reference to the helper.
    					ui.helper;
    					//return reference to the offset.
    					ui.offest;
    					//return to get a reference to the original position of the draggable element (the node).
    					ui.orginalPosition
    					//return reference to the node path.
    					ui.path
    					//return reference to the current position of the draggable element.
    					ui.position
    				});
    
    				//Initialize
    				$(".selector").igTree({
    					nodeDropped: function(evt, ui) {...}
    				});
    			 
  • nodeDropping

    キャンセル可能:
    true

    ノードがドロップする前に発生します。

    • evt
      タイプ: Event

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

    • ui
      タイプ: Object

        • path
          タイプ: String

          ターゲット ノードの data-path 属性を取得します。

        • element
          タイプ: jQuery

          ノードの jQuery 要素への参照を取得します。

        • data
          タイプ: Object

          ターゲット ノード データへの参照を取得します。

        • binding
          タイプ: Object

          ターゲット ノードのレベルにあるバインド オブジェクトへの参照を取得します。

        • helper
          タイプ: jQuery

          ヘルパーへの参照を取得します。

        • offset
          タイプ: Object

          オフセットへの参照を取得します。

        • position
          タイプ: Object

          ドラッグ可能な要素の現在の位置への参照を取得します。

        • draggable
          タイプ: jQuery

          ドラッグ可能な要素 (ノード) への参照を取得します。

    コード サンプル

     
    				//Bind after initialization
    				$(document).on("igtreenodedropping", ".selector", function (evt, ui) {
    					//return reference to the binding.
    					ui.binding;
    					//return reference to the data.
    					ui.data;
    					//return reference to the draggable element (the node).
    					ui.draggable
    					//return reference to the element.
    					ui.element;
    					//return reference to the helper.
    					ui.helper;
    					//return reference to the offset.
    					ui.offest;
    					//return to get a reference to the original position of the draggable element (the node).
    					ui.path
    					//return reference to the current position of the draggable element.
    					ui.position
    				});
    
    				//Initialize
    				$(".selector").igTree({
    					nodeDropping: function(evt, ui) {...}
    				});
    			 
  • nodeExpanded

    キャンセル可能:
    false

    ノードが展開した後に発生します。

    • evt
      タイプ: Event

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

    • ui
      タイプ: Object

        • owner
          タイプ: Object

          ツリーへの参照を取得します。

        • node
          タイプ: Object

          展開されたノード オブジェクトへの参照を取得します。

    コード サンプル

     
    				//Bind after initialization
    				$(document).on("igtreenodeexpanded", ".selector", function (evt, ui) {
    					//return reference to igTree
    					ui.owner;
    					//return reference to the expanded node object.
    					ui.node;
    				});
    
    				//Initialize
    				$(".selector").igTree({
    					nodeExpanded: function(evt, ui) {...}
    				});
    			 
  • nodeExpanding

    キャンセル可能:
    true

    ノードが展開する前に発生します。

    • evt
      タイプ: Event

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

    • ui
      タイプ: Object

        • owner
          タイプ: Object

          ツリーへの参照を取得します。

        • node
          タイプ: Object

          展開されるノード オブジェクトへの参照を取得します。

    コード サンプル

     
    				//Bind after initialization
    				$(document).on("igtreenodeexpanding", ".selector", function (evt, ui) {
    					//return reference to igTree
    					ui.owner;
    					//return reference to the node object about to expand.
    					ui.node;
    				});
    
    				//Initialize
    				$(".selector").igTree({
    					nodeExpanding: function(evt, ui) {...}
    				});
    			 
  • nodePopulated

    キャンセル可能:
    false

    要求に応じた読み込みの場合に、ノードの子が生成された後に発生します。

    • evt
      タイプ: Event

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

    • ui
      タイプ: Object

        • path
          タイプ: String

          生成したノードの data-path 属性を取得します。

        • element
          タイプ: jQuery

          読み込まれたノードの jQuery 要素への参照を取得します。

        • data
          タイプ: Object

          ノード データを取得します。

        • binding
          タイプ: Object

          ノードの読み込み先のレベルにあるバインド オブジェクトへの参照を取得します。

    コード サンプル

     
    				//Bind after initialization
    				$(document).on("igtreenodepopulated", ".selector", function (evt, ui) {
    					//return a reference to the path of the populated node.
    					ui.path;
    					//return a reference to the jQuery element of the populated node.
    					ui.element;
    					//return the node data.
    					ui.data;
    					//return a reference to the bindings object for the level at which the populated node is located.
    					ui.binding;
    				});
    
    				//Initialize
    				$(".selector").igTree({
    					nodePopulated: function(evt, ui) {...}
    				});
    			 
  • nodePopulating

    キャンセル可能:
    true

    要求に応じた読み込みの場合に、ノードの子が生成される前に発生します。

    • evt
      タイプ: Event

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

    • ui
      タイプ: Object

        • path
          タイプ: String

          生成しているノードの data-path 属性を取得します。

        • element
          タイプ: jQuery

          読み込まれるノードの jQuery 要素への参照を取得します。

        • data
          タイプ: Object

          ノード データを取得します。

        • binding
          タイプ: Object

          ノードの読み込み先のレベルにあるバインド オブジェクトへの参照を取得します。

    コード サンプル

     
    				//Bind after initialization
    				$(document).on("igtreenodepopulating", ".selector", function (evt, ui) {
    					//return areference to the path of the node being populated.
    					ui.path;
    					//return a reference to the jQuery element of the node being populated.
    					ui.element;
    					//return the node data.
    					ui.data;
    					//return a reference to the bindings object for the level at which the populating node is located.
    					ui.binding;
    				});
    
    				//Initialize
    				$(".selector").igTree({
    					nodePopulating: function(evt, ui) {...}
    				});
    			 
  • rendered

    キャンセル可能:
    false

    ツリーのレンダリングが完了した後に発生します。

    • evt
      タイプ: Event

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

    • ui
      タイプ: Object

        • owner
          タイプ: Object

          描画を実行したツリーへの参照を取得します。

    コード サンプル

     
    				//Bind after initialization
    				$(document).on("igtreerendered", ".selector", function (evt, ui) {
    					//return reference to the tree.
    					ui.owner;
    				});
    
    				//Initialize
    				$(".selector").igTree({
    					rendered: function(evt, ui) {...}
    				});
    			 
  • rendering

    キャンセル可能:
    false

    ツリーのレンダリングが開始する前に発生します。

    • evt
      タイプ: Event

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

    • ui
      タイプ: Object

        • owner
          タイプ: Object

          レンダリングを実行するツリーへの参照を取得します。

        • dataView
          タイプ: Object

          ツリーにレンダリングされるデータへの参照を取得します。

    コード サンプル

     
    				//Bind after initialization
    				$(document).on("igtreerendering", ".selector", function (evt, ui) {
    					//return reference to the tree.
    					ui.owner;
    					//return reference to the data the tree is going to render.
    					ui.dataView;
    				});
    
    				//Initialize
    				$(".selector").igTree({
    					rendering: function(evt, ui) {...}
    				});
    			 
  • selectionChanged

    キャンセル可能:
    false

    新しいノードが選択された後に発生します。

    • evt
      タイプ: Event

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

    • ui
      タイプ: Object

        • owner
          タイプ: Object

          ツリーへの参照を取得します。

        • selectedNodes
          タイプ: Array

          選択されたノードへの参照を取得します

        • newNodes
          タイプ: Array

          新たに選択されたノードへの参照を取得します。

    コード サンプル

     
    				//Bind after initialization
    				$(document).on("igtreeselectionchanged", ".selector", function (evt, ui) {
    					//return reference to the tree.
    					ui.owner;
    					//return reference to the selected nodes.
    					ui.selectedNodes;
    					//return reference to the newly added nodes to the selection.
    					ui.newNodes;
    				});
    
    				//Initialize
    				$(".selector").igTree({
    					selectionChanged: function(evt, ui) {...}
    				});
    			 
  • selectionChanging

    キャンセル可能:
    true

    新しいノードが選択される前に発生します。

    • evt
      タイプ: Event

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

    • ui
      タイプ: Object

        • owner
          タイプ: Object

          ツリーへの参照を取得します。

        • selectedNodes
          タイプ: Array

          現在選択されているノードへの参照を取得します。

        • newNodes
          タイプ: Array

          新たに選択されたノードへの参照を取得します。

    コード サンプル

     
    				//Bind after initialization
    				$(document).on("igtreeselectionchanging", ".selector", function (evt, ui) {
    					//return reference to the tree.
    					ui.owner;
    					//return reference to the currently selected nodes.
    					ui.selectedNodes;
    					//return reference to the new nodes getting selected.
    					ui.newNodes;
    				});
    
    				//Initialize
    				$(".selector").igTree({
    					selectionChanging: function(evt, ui) {...}
    				});
    			 
  • addNode

    .igTree( "addNode", node:object, [parent:object], [nodeIndex:number] );

    新しいノード配列をツリーに追加します。新しいノードはルートか指定した親ノードおよび指定したインデックスに追加されます。

    • node
    • タイプ:object
    • 新しいノードを作成するデータを指定します。
    • parent
    • タイプ:object
    • オプション
    • ノードに追加する親ノードの要素を指定します。
    • nodeIndex
    • タイプ:number
    • オプション
    • ノードを挿入するインデックスを指定します。

    コード サンプル

     
    				$(".selector").igTree("addNode", {Text: "New Node"}, parentNode);
    			 
  • applyChangesToNode

    .igTree( "applyChangesToNode", element:object, data:object );

    提供されたノード要素で提供されたデータと UI 更新を実行します。

    • element
    • タイプ:object
    • 更新するノードを指定します。
    • data
    • タイプ:object
    • ノードが更新することに基づく新しいデータ項目を指定します。

    コード サンプル

     
    				 $(".selector").igTree("applyChangesToNode", node, newData);
    			 
  • changeGlobalLanguage
    継承

    .igTree( "changeGlobalLanguage" );

    ウィジェットの言語をグローバルの言語に変更します。グローバルの言語は $.ig.util.language の値です。

    コード サンプル

     
    				$(".selector").igTree("changeGlobalLanguage");
    			 
  • changeGlobalRegional
    継承

    .igTree( "changeGlobalRegional" );

    ウィジェットの地域設定をグローバルの地域設定に変更します。グローバルの地域設定は $.ig.util.regional にあります。

    コード サンプル

     
    				$(".selector").igTree("changeGlobalRegional");
    			 
  • changeLocale

    .igTree( "changeLocale" );

  • checkedNodes

    .igTree( "checkedNodes" );
    返却型:
    array
    返却型の説明:
    すべてのチェックされたノードのノード オブジェクトの配列を返します。

    チェックボックスがチェックされたノードのすべてのノード オブジェクトを取得します。

    コード サンプル

     
    				var nodes = $(".selector").igTree("checkedNodes");
    			 
  • checkNode

    .igTree( "checkNode", nodeObj:object, cascadeDir:object );

    チェック状態をノードに適用します。

    • nodeObj
    • タイプ:object
    • 状態の適用対象のノード要素を指定します。
    • cascadeDir
    • タイプ:object

    コード サンプル

     
    				$(".selector").igTree("checkNode", targetNode);
    			 
  • checkState

    .igTree( "checkState", node:object );
    返却型:
    string
    返却型の説明:
    ノードのチェックボックス状態。「on」はチェック付きで、「partial」は部分チェック付きで、「off」はチェックなしです。

    指定したノードのチェック状態を返します。

    • node
    • タイプ:object
    • ノード要素を指定します。

    コード サンプル

     
    				var checkedState = $(".selector").igTree("checkState", targetNode);
    			 
  • children

    .igTree( "children", parent:object );
    返却型:
    array
    返却型の説明:
    ノード オブジェクトの説明: { path: "node_path", element: jQuery LI Element, data: data, binding: binding }。

    指定されたノード要素のすぐ下の子のノード オブジェクト コレクションを取得します。

    • parent
    • タイプ:object
    • ノード要素を指定します。

    コード サンプル

     
    				var nodes = $(".selector").igTree("children", parentNode);
    			 
  • childrenByPath

    .igTree( "childrenByPath", path:string );
    返却型:
    array
    返却型の説明:
    ノード オブジェクトの説明: { path: "node_path", element: jQuery LI Element, data: data, binding: binding }。

    指定されたパスを持つノードのすぐ下の子のノード オブジェクト コレクションを取得します。

    • path
    • タイプ:string
    • 取得する子のノードへのパスを指定します。

    コード サンプル

     
    				// Retrieves child nodes of the 1st child of the 2nd node at root level
    				var nodes = $(".selector").igTree("childrenByPath", "1_0");
    			 
  • clearSelection

    .igTree( "clearSelection" );

    すべての選択済みノードの選択を解除します。

    コード サンプル

     
    				$(".selector").igTree("clearSelection");
    			 
  • collapse

    .igTree( "collapse", node:jquery, [event:object] );

    指定ノードを折り畳みます。

    • node
    • タイプ:jquery
    • 縮小するノード要素を指定します。
    • event
    • タイプ:object
    • オプション
    • 縮小をトリガーした元ののブラウザー イベント。

    コード サンプル

     
    				$(".selector").igTree("collapse", targetNode);
    			 
  • dataBind

    .igTree( "dataBind" );

    igTree 上でデータ バインドを実行します。

    コード サンプル

     
    				$(".selector").igTree("dataBind");
    			 
  • deselect

    .igTree( "deselect", node:object );

    指定されたノードの選択を解除します。

    • node
    • タイプ:object
    • 選択解除するノード要素を指定します。

    コード サンプル

     
    				$(".selector").igTree("deselect", targetNode);
    			 
  • destroy

    .igTree( "destroy" );

    igTree ウィジェットを破棄します。

    コード サンプル

     
    				$(".selector").igTree("destroy");
    			 
  • expand

    .igTree( "expand", node:jquery, [event:object] );

    指定されたノードを展開します。

    • node
    • タイプ:jquery
    • 展開するノード要素を指定します。
    • event
    • タイプ:object
    • オプション
    • 展開をトリガーした元のブラウザー イベント。

    コード サンプル

     
    				$(".selector").igTree("expand", targetNode);
    			 
  • expandToNode

    .igTree( "expandToNode", node:object, [toSelect:bool] );

    指定したノードまでツリーを展開し、指定される場合にノードを選択します。

    • node
    • タイプ:object
    • ツリーが展開されるまでのノード要素を指定します。
    • toSelect
    • タイプ:bool
    • オプション
    • ノードまで展開した後、ノードを選択するかどうかを指定します。

    コード サンプル

     
    				$(".selector").igTree("expandToNode", targetNode);
    			 
  • findImmediateNodesByText

    .igTree( "findImmediateNodesByText", text:string, [parent:object] );
    返却型:
    array
    返却型の説明:
    ノード オブジェクトの説明: { path: "node_path", element: jQuery LI Element, data: data, binding: binding }。

    大文字と小文字を区別する指定されたテキストを持つ、指定された親のすぐ下の子のノード オブジェクトすべてを取得します。

    • text
    • タイプ:string
    • 検索するテキスト。
    • parent
    • タイプ:object
    • オプション
    • 子が検索されるノード要素。

    コード サンプル

     
    				var nodes = $(".selector").igTree("findImmediateNodesByText", "ice cream", targetNode);
    			 
  • findNodesByText

    .igTree( "findNodesByText", text:string, [parent:object] );
    返却型:
    array
    返却型の説明:
    ノード オブジェクトの説明: { path: "node_path", element: jQuery LI Element, data: data, binding: binding }。

    大文字と小文字を区別する指定されたテキストを持つすべてのノード オブジェクトを取得します。

    • text
    • タイプ:string
    • 検索するテキスト。
    • parent
    • タイプ:object
    • オプション
    • 検索から開始するノード要素。指定されていない場合、検索はツリーのルートから始まります。

    コード サンプル

     
    				var nodes = $(".selector").igTree("findNodesByText", "ice cream", targetNode);
    			 
  • isChecked

    .igTree( "isChecked", node:object );
    返却型:
    bool
    返却型の説明:
    ノードがチェックされている場合は True、そうでなければ False。

    指定されたノード要素のチェック状態が checked の場合は true、それ以外の場合は false を返します。

    • node
    • タイプ:object
    • ノード要素を指定します。

    コード サンプル

     
    				var isChecked = $(".selector").igTree("isChecked", targetNode);
    			 
  • isExpanded

    .igTree( "isExpanded", node:object );
    返却型:
    bool
    返却型の説明:
    ノードが選択されている場合は True、そうでなければ False。

    指定されたノード要素が展開されている場合は true、それ以外の場合は false を返します。

    • node
    • タイプ:object
    • ノード要素を指定します。

    コード サンプル

     
    				var isExpanded = $(".selector").igTree("isExpanded", targetNode);
    			 
  • isSelected

    .igTree( "isSelected", node:object );
    返却型:
    bool
    返却型の説明:
    ノードが選択されている場合は True、そうでなければ False。

    指定されたノード要素が選択されている場合は true、それ以外の場合は false を返します。

    • node
    • タイプ:object
    • ノード要素を指定します。

    コード サンプル

     
    				var isSelected = $(".selector").igTree("isSelected", targetNode);
    			 
  • nodeByIndex

    .igTree( "nodeByIndex", index:number, [parent:object] );
    返却型:
    object
    返却型の説明:
    指定されたインデックスにあるノード要素。

    指定された親の n 番目の jQuery ノード要素の子を取得します。

    • index
    • タイプ:number
    • ノードが取得されるインデックスを指定します。
    • parent
    • タイプ:object
    • オプション
    • 検索から開始する親ノード要素。

    コード サンプル

     
    				var node = $(".selector").igTree("nodeByIndex", 10);
    			 
  • nodeByPath

    .igTree( "nodeByPath", nodePath:string );
    返却型:
    object
    返却型の説明:
    指定したパスを持つ選択された jQuery ノード要素を返します。ノードが検索されない場合、length プロパティは 0 です。

    指定されたパスを持つノードの jQuery 要素を取得します。

    • nodePath
    • タイプ:string
    • 要求されたノードへのパスを指定します。

    コード サンプル

     
    				// Retrieves the 1st child of the 2nd node at root level
    				var nodes = $(".selector").igTree("nodeByPath", "1_0");
    			 
  • nodeDataFor

    .igTree( "nodeDataFor", path:string );
    返却型:
    object
    返却型の説明:
    ノード データを含む JSON オブジェクト。

    指定されたパスを持つノードのデータを返します。

    • path
    • タイプ:string
    • データを返すノード パスを指定します。

    コード サンプル

     
    				// Retrieves the data of the 1st child of the 2nd node at root level
    				var nodes = $(".selector").igTree("nodeDataFor", "1_0");
    			 
  • nodeFromElement

    .igTree( "nodeFromElement", element:jquery );
    返却型:
    object
    返却型の説明:
    ノード オブジェクトの説明: { path: "node_path", element: jQuery LI Element, data: data, binding: binding }。

    指定されたノード要素のノード オブジェクトを取得します。

    • element
    • タイプ:jquery
    • ノード jQuery 要素を指定します。

    コード サンプル

     
    				var nodes = $(".selector").igTree("nodeFromElement", element);
    			 
  • nodesByValue

    .igTree( "nodesByValue", value:string );
    返却型:
    object
    返却型の説明:
    指定された値を持つノード要素の jQuery オブジェクトを返します。ノードが検索されない場合、length プロパティは 0 です。

    指定された値を持つノードの jQuery 要素を取得します。

    • value
    • タイプ:string
    • 要求されたノードの値を指定します。

    コード サンプル

     
    				var nodes = $(".selector").igTree("nodesByValue", "NY");
    			 
  • parentNode

    .igTree( "parentNode", node:object );
    返却型:
    object
    返却型の説明:
    親ノード要素を返します。パラメーターとして提供されたノードがルート レベル ノードの場合、null 値を返します。

    指定されたノード要素の親ノード要素を取得します。

    • node
    • タイプ:object
    • 折り畳む、jQuery の選択されたノード要素を指定します。

    コード サンプル

     
    				var parentNode = $(".selector").igTree("parentNode", targetNode);
    			 
  • partiallyCheckedNodes

    .igTree( "partiallyCheckedNodes" );
    返却型:
    array
    返却型の説明:
    すべての部分チェックされたノードのノード オブジェクトの配列を返します。

    チェックボックスが部分チェックされたノードのすべてのノード オブジェクトを取得します。

    コード サンプル

     
    				var nodes = $(".selector").igTree("partiallyCheckedNodes");
    			 
  • partiallyCheckNode

    .igTree( "partiallyCheckNode", nodeObj:object, cascadeDir:object );

    部分的なチェック状態をノードに適用します。

    • nodeObj
    • タイプ:object
    • 状態の適用対象のノード要素を指定します。
    • cascadeDir
    • タイプ:object

    コード サンプル

     
    				$(".selector").igTree("partiallyCheckNode", targetNode);
    			 
  • removeAt

    .igTree( "removeAt", path:string );

    指定したパスとそのすべての子とともにノードを削除します。

    • path
    • タイプ:string
    • 削除するノードのパスを指定します。

    コード サンプル

     
    				$(".selector").igTree("removeAt", "0_1");
    			 
  • removeNodesByValue

    .igTree( "removeNodesByValue", value:string );

    指定した値のすべてのノードを削除します。

    • value
    • タイプ:string
    • 削除するノードの値を指定します。

    コード サンプル

     
    				$(".selector").igTree("removeNodesByValue", "Old Node");
    			 
  • select

    .igTree( "select", node:object, [event:object] );

    ノードを選択します。

    • node
    • タイプ:object
    • 選択するノード要素を指定します。
    • event
    • タイプ:object
    • オプション
    • これが API 呼び出しではない場合、このアクションをトリガーしたブラウザー イベントを示します。

    コード サンプル

     
    				$(".selector").igTree("select", targetNode);
    			 
  • selectedNode

    .igTree( "selectedNode" );
    返却型:
    object
    返却型の説明:
    ノード オブジェクトの説明: { path: "node_path", element: jQuery LI Element, data: data, binding: binding }。

    指定されたノードのノード オブジェクトを取得します。

    コード サンプル

     
    				var node = $(".selector").igTree("selectedNode");
    			 
  • toggle

    .igTree( "toggle", node:object, [event:object] );

    指定されたノードの最小化と展開状態を切り替えます。

    • node
    • タイプ:object
    • そのチェックボックスが切り替えられるノード要素のを指定します。
    • event
    • タイプ:object
    • オプション
    • これが API 呼び出しではない場合、このアクションをトリガーしたブラウザー イベントを示します。

    コード サンプル

     
    				$(".selector").igTree("toggle", targetNode);
    			 
  • toggleCheckstate

    .igTree( "toggleCheckstate", node:object, [event:object] );

    checkboxMode が off に設定されていない場合に、ノードの checkstate を切り替えます。それ以外の場合は何も行いません。

    • node
    • タイプ:object
    • そのチェックボックスが切り替えられるノード要素のを指定します。
    • event
    • タイプ:object
    • オプション
    • これが API 呼び出しではない場合、このアクションをトリガーしたブラウザー イベントを示します。

    コード サンプル

     
    				$(".selector").igTree("toggleCheckstate", targetNode);
    			 
  • transactionLog

    .igTree( "transactionLog" );
    返却型:
    array
    返却型の説明:
    トランザクション ログ スタック。

    トランザクション ログ スタックを返します。

    コード サンプル

     
    				var log = $(".selector").igTree("transactionLog");
    			 
  • uncheckedNodes

    .igTree( "uncheckedNodes" );
    返却型:
    array
    返却型の説明:
    すべてのチェック解除されたノードのノード オブジェクトの配列を返します。

    チェックボックスがチェック解除されたノードのすべてのノード オブジェクトを取得します。

    コード サンプル

     
    				var nodes = $(".selector").igTree("uncheckedNodes");
    			 
  • uncheckNode

    .igTree( "uncheckNode", nodeObj:object, cascadeDir:object );

    非チェック状態をノードに適用します。

    • nodeObj
    • タイプ:object
    • 状態の適用対象のノード要素を指定します。
    • cascadeDir
    • タイプ:object

    コード サンプル

     
    				$(".selector").igTree("uncheckNode", targetNode);
    			 
  • ui-state-default ui-corner-all ui-igcheckbox-normal

    チェックボックス コンテナーに適用されるクラス。
  • ui-icon ui-icon-check ui-igcheckbox-normal-off

    チェックボックスのチェックされていない状態を定義するクラス。
  • ui-icon ui-icon-check ui-igcheckbox-normal-on

    チェックボックスのチェックされた状態を定義するクラス。
  • ui-icon ui-icon-check ui-state-disabled ui-igcheckbox-normal-on

    チェックボックスの部分的にチェックされた状態を定義するクラス。
  • ui-icon ui-icon-triangle-1-s

    折り畳まれたノードの css スプライト アイコンを定義するクラス。
  • ui-icon ui-icon-plus

    コピー ドロップ インジケーター アイコンを定義するクラス。
  • ui-widget ui-igtree-dropindicator ui-state-highlight ui-corner-all

    ドロップ インジケーター コンテナーに適用されるクラス。
  • ui-icon ui-icon-triangle-1-e

    展開されたノードの css スプライト アイコンを定義するクラス。
  • ui-state-default ui-igtree-insertline

    行の挿入コンテナーに適用されるクラス。
  • ui-widget ui-igtree-dropindicator ui-state-error ui-corner-all

    無効なドロップ インジケーター コンテナーに適用されるクラス。
  • ui-icon ui-icon-cancel

    無効な移動のドロップ インジケーター アイコンを定義するクラス。
  • ui-icon ui-icon-arrowthick-1-e

    移動のドロップ インジケーター アイコンを定義するクラス。
  • ui-state-focus

    ノードのフォーカス状態のスタイルを定義するクラス。
  • ui-corner-all

    ノード アンカーに適用されるクラス。
  • ui-igtree-expander

    展開/折り畳みノード コンテナーに適用されるクラス。
  • ui-state-highlight

    ノードの強調表示状態のスタイルを定義するクラス。
  • ui-state-hover

    ノードのホバー状態のスタイルを定義するクラス。
  • ui-igtree-node-nochildren

    子を持たないため展開画像を持たないノードに適用されるクラス。
  • ui-state-default

    ノードのデフォルト状態のスタイルを定義するクラス。
  • ui-state-active

    ノードの選択された状態のスタイルを定義するクラス。
  • ui-igtree-parentnode

    子を持つノードに適用されるクラス。
  • ui-widget ui-igtree

    上のコンテナー要素に適用されるクラス。
  • ui-igtree-collection

    ノード コレクション要素に適用されるクラス。
  • ui-igtree-node

    ツリーのあらゆるノード要素に適用されるクラス。
  • ui-igtree-root ui-widget-content

    ツリーのルート UL 要素に適用されるクラス。
  • ui-igtree-noderoot

    ツリーのルート ノードであるあらゆるノード要素に適用されるクラス。

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