jQuery EasyUI Tree Menu - Adding Nodes to Tree Menu
This tutorial shows you how to append nodes to a tree menu (Tree). We will create a food tree containing fruit and vegetable nodes, and then add some additional fruits to the existing fruit nodes.
Creating the Food Tree
First, we create the food tree with 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 within the <ul> tag, and tree node data is loaded from the URL "tree_data.json".
Getting the Parent Node
Next, we select the fruit node by clicking on it, to which we will add some additional fruit data. Execute the getSelected method to get the node:
var node = $('#tt').tree('getSelected');
The getSelected method returns a JavaScript object with properties id, text, and target. The target property is a DOM object referencing 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 adding some fruits, you will see:
As you can see, using the easyui Tree plugin to append nodes is not that difficult.