jQuery EasyUI Tree Menu -Adding Nodes to Tree Menu

This tutorial shows you how to append nodes to a Tree. We will create a food tree containing fruit and vegetable nodes, then add some other fruits to the existing fruit node.

Creating the Food Tree

First, we create the food tree, as shown in the following code:

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

Note that the Tree component is defined in a <ul> tag, and the tree node data is loaded from the URL "tree_data.json".

Getting the Parent Node

Then we select the fruit node by clicking on a node, and we will add some other fruit data. Execute the getSelected method to get the node to process:

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

The return value of the getSelected method is a JavaScript object, which has id, text, and target attributes. The target attribute is a DOM object that references the selected node, and its append method will be used to append child nodes.

Appending Nodes

    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
        });
    }

When you add some fruits, you will see:

As you can see, using the EasyUI Tree plugin to append nodes is not that difficult.

Download jQuery EasyUI Examples

jeasyui-tree-tree3.zip