jQuery EasyUI ツリーメニュー -ツリーメニューにノードを追加

このチュートリアルでは、ツリーメニュー（Tree）にノードを追加する方法を説明します。果物と野菜のノードを含む食品ツリーを作成し、既存の果物ノードに他の果物を追加します。

食品ツリーを作成

まず、食品ツリーを作成します。コードは次のとおりです。

    <div style="width:200px;height:auto;border:1px solid #ccc;">
        <ul id="tt" class="easyui-tree" url="tree_data.json"></ul>
    </div>

ツリー（Tree）コンポーネントは <ul> タグ内に定義され、ツリーノードのデータは URL "tree_data.json" からロードされることに注意してください。

親ノードを取得

次に、ノードをクリックして果物ノードを選択し、他の果物データを追加します。getSelected メソッドを実行して処理対象のノードを取得します。

    var node = $('#tt').tree('getSelected');

getSelected メソッドの戻り値は JavaScript オブジェクトで、id、text、target の各プロパティを持ちます。target プロパティは選択されたノードを参照する DOM オブジェクトであり、その append メソッドを使用して子ノードを追加します。

ノードを追加

    var node = $('#tt').tree('getSelected');
    if (node){
        var nodes = [{
            "id":13,
            "text":"Raspberry"
        },{
            "id":14,
            "text":"Cantaloupe"
        }];
        $('#tt').tree('append', {
            parent:node.target,
            data:nodes
        });
    }

いくつかの果物を追加すると、次のように表示されます。

ご覧のとおり、easyui のツリー（Tree）プラグインを使用してノードを追加するのはそれほど難しくありません。

jQuery EasyUI サンプルをダウンロード

jeasyui-tree-tree3.zip