jsTree Creation With HTML Data
Posted By : Sagar Watts | 18-Sep-2017
We can make use of HTML and Ajax data to create a tree. We will discuss tree creation using both of the ways mentioned. We can create a simple tree and tree with childs. Also we can make the tree configuration in HTML itself . Let’s start with simple basic tree creation , then we move on to the tree with childs.
Basic Tree: - we can make use of unordered list to represent it as a tree structure. To achieve our goal all we need is a <ul> and <li> markup wrapped in a container. All the text written inside the <li> will be converted into the tree nodes. You can follow the below example to create your own tree:
Once we have a HTML, we can create a tree instance using the method:
$('#container’).jstree();
Node 1 and Node 2 will be the tree nodes without any childs.
Tree with Childs:- To create a tree having nodes with child we need to make a small change in the above shown HTML, we need a <ul> and <li> markup nested in each <li> markup. The nested <li> text will be shown as childs of the parent <li>. The modified HTML will look like:
The child 1 and child 2 will appear as the childs of the Node 1. Tree instance can be created in the same way as we created above.
Creating tree with AJAX : Apart from the HTML, we can also make use of AJAX to get the HTML content and render a tree structure. The format will be same as of the above example, however the only difference will be that the HTML will be returned from the server. For that we need to use core.data configuration. The configuration for the AJAX will be as :
$('#treeId').jstree({
'core' : {
'data' : {
'url' : 'HTML_URL.html',
'data' : function (node) {
return { 'id' : node.id };
}
}
}
});
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Sagar Watts
Sagar is a bright Web App Lead Developer , he has great knowledge of core Java and advance Java. His hobbies are Net Surfing, Listen Music and Reading Books.