EasyUI attaches tree nodes to the tree

@ Author YHC

This tutorial shows you how to attach a node to a tree. We will create a food tree Containing Fruit and Vegetable nodes, and then add some other fruits to an existing fruit node.

 

 

Create a foods (food) tree
First, we create a food tree and the code is like this.

[Html] view plaincopyprint? <Div style = "width: 200px; height: auto; border: 1px solid # ccc;">
<Ul id = "tt" class = "easyui-tree" url = "tree_data.json"> </ul>
</Div>

<Div style = "width: 200px; height: auto; border: 1px solid # ccc;">
<Ul id = "tt" class = "easyui-tree" url = "tree_data.json"> </ul>
</Div> note: the tree component is defined in the <ul> flag. The tree node data is loaded from the URL "tree_data.json.

Obtain the parent node
Then, we click the node to select the fruit (Food node). We will add some other food (fruit) data and execute the getSelected method to get the processing node.

[Javascript]
Var node = $ ('# tt'). tree ('getselected ');

Var node = $ ('# tt '). tree ('getselected'); The returned result of the getSelected method is a javascript object that has an id, text, and target attribute. The target attribute is a DOM object that references the selected node, its append method will use the append subnode.

Additional Node
[Javascript]
Var node = $ ('# tt'). tree ('getselected ');
If (node ){
Var nodes = [{
"Id": 13,
"Text": "Raspberry"
},{
"Id": 14,
"Text": "Cantaloupe"
}];
$ ('# Tt'). tree ('append ',{
Parent: node.tar get,
Data: nodes
});
}

Var node = $ ('# tt'). tree ('getselected ');
If (node ){
Var nodes = [{
"Id": 13,
"Text": "Raspberry"
},{
"Id": 14,
"Text": "Cantaloupe"
}];
$ ('# Tt'). tree ('append ',{
Parent: node.tar get,
Data: nodes
});
} When you add some fruit (food), you will see:

 

As you can see, it is not that difficult to use the tree plug-in of easyui to add nodes.

 

Author: yhc13429826359