ノード追加/削除の概要と例 (igTree)

トピックの概要

目的

ここでは、コード例とともに、igTree™ コントロールのノードをプログラム的に追加/削除する方法を説明します。

前提条件

このトピックを理解するために、以下のトピックを参照することをお勧めします。

• igTree の概要: このトピックでは、機能、データ ソースとのバインド、要件、テンプレートなど、igTree コントロール関連の概念について説明します。

このトピックの内容

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

• 概要
• コード例
• コード例: ツリーに新しいノードを追加
  • 説明
  • コード
• コード例: ツリーに複数のノードを追加
• • 説明
  • コード
• コード例: 選択したノードをツリーから削除
  • 説明
  • コード
• コード例: ツリーから値別にノードを削除
  • 説明
  • コード
• 関連コンテンツ

概要

ノードの追加と削除 (概要)

igTree™ コントロールでは、ノードの追加と削除をサポートしています。

ノードの追加

ノードに追加できる要素は、以下のとおりです。

• ノード オブジェクト
• 配列オブジェクト
• 階層ノード

ノードの追加は、addNode メソッドで行います。

ノードの解除

ノードは以下のいずれかの方法で削除できます。

• パス - ノードは removeAt で削除します。
• 値 - ノードは removeNodesByValue で削除します。

コード例

以下の表は、このトピックで使用したコード例をまとめたものです。

コード例: ツリーに新しいノードを追加

説明

この例では、igTree コントロールのツリーに新しいノードを追加する方法を紹介します。この例では、ノード Pepsi を取得し、選択したノードの下の HTML プレースから追加します。そのためには、igTree で選択したノードまでの参照を取得し、HTML リストから選択したノードに HTML リスト項目を追加します。

プレビュー

コード

JavaScript の場合:

var selectedNode = $("#tree").igTree("selectedNode").element;
// This returns a JSON object with the following structure:
// var newNode = {
//                  Text: "Pepsi",
//                  Value: 5
//               };
var newNode = clickedElement();
if (selectedNode != null) {
    // Adding the node to the tree
    $("#tree").igTree("addNode", newNode, selectedNode);
}

コード例: ツリーに複数のノードを追加

説明

この例では、igTree コントロールのツリーに複数のノードを追加する方法を紹介します。たとえば、HTML リストから全ノード セットを取得して、選択したノード下に設定するとしましょう。そのためには、igTree で選択したノードへの参照を取得し、HTML リストから選択したノード セットを追加します。この例では、新しいノードの値を生成するランダマイザーを使用します (インスタンスに数量を表示)。

プレビュー

コード

JavaScript の場合:

var selectedNode = $("#tree").igTree("selectedNode").element;
if (selectedNode != null) {
    // Creating an array of new nodes
    var newNodes = [];
    // Converting the HTML list to the array of nodes
        var list = $("ul#items li").each(function () {
            var item = $(this);
            // Pushing new items with random values representing quantities
            newNodes.push({
                Text: item.html(),
                Value: Math.floor(Math.random() * 1001)
            });
        });
    // Adding the array of nodes to the tree
    $("#tree").igTree("addNode", newNodes, selectedNode);
}

コード例: 選択したノードをツリーから削除

説明

この例では、igTree コントロールのツリーから選択したノードを削除する方法を紹介します。まず、選択したノードまでの参照を igTree で取得し、そのパスで参照してノードを削除します。

プレビュー

コード

JavaScript の場合:

var selectedPath = $("#tree").igTree("selectedNode").path;
if (selectedPath != null) {
    // Removing the selected node by path
    $("#tree").igTree("removeAt", selectedPath);
}

コード例: ツリーから値別にノードを削除

説明

この例では、igTree から値別にノードを削除する方法を紹介します。この例では、HTML 入力フィールドからユーザーが入力した値と一致する値のすべてのノードを削除します。まず値を取得し、値で参照してノードを削除します。

プレビュー

コード

JavaScript の場合:

var nodeValue = $("#nodeValue").val();
if (nodeValue) {
    // Removing all nodes with the provided value
    $("#tree").igTree("removeNodesByValue", nodeValue);                   
 }

関連コンテンツ

トピック

このトピックの追加情報については、以下のトピックも合わせてご参照ください。

• API リンク (igTree): ここでは、igTree jQuery と MVC API までのリンクを紹介します。

• ノードの追加/削除メソッド API のリファレンス (igTree): ここでは、igTree コントロールのノードを追加、削除するメソッドのリファレンスを紹介します。

サンプル

このトピックについては、以下のサンプルも参照してください。

• API およびイベント: このサンプルは igTree API を使用する方法を紹介します。