May 09, 2021 jQuery EasyUI
You can add nodes to the jQuery EasyUI Tree menu.
The following example shows you how to add nodes to a tree menu: We'll create a food tree with fruit and vegetable nodes, and then add some other fruits to the existing fruit nodes.
First, let's create a 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 in the .lt;ul-gt; tag, and the tree node data is loaded from the URL "tree_data.json".
Then we select the fruit node by clicking on the node, and we will add some additional fruit data. Executing the getSelected method gets the processing node:
var node = $('#tt').tree('getSelected');
The return result of the getSelected method is a javascript object with an id, text, target property. The target property is a DOM object that references the selected node, and its append method will be used to attach child 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 fruit, you'll get the following results:
As you can see, it's not that hard to attach nodes using easyui's Tree plug-in.