Parent Child Hierarchy using jqTree in jQuery / Javascript:
When you want to display your data in parent child hierarchical view, then jQuery’s jqTree is the most simplest and easy plugin which can be configured in just 5 mins.
By following their official documentation steps, I just created a simple one page(combined all in the below one file only for easy try) which works nicely. But they provide lot of examples and customization’s which you can use anywhere in your custom requirements and projects.
Step 1: Include jQuery Js File
Step 2: Include jqTree’s js (tree.jquery.min.js) and css (jqtree.min.css) files
Step 3: Create a div with id as tree1 to display the tree in that particular div area.
Step 4: Have a data in json format and pass that as a input to the tree to make it appear as parent child view in your html templates.
Parent Child Hierarchy using jqTree in jQuery / Javascript:
[html]
<!Doctype>
<html>
<head>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/jqtree/1.4.4/tree.jquery.min.js”></script>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/jqtree/1.4.4/jqtree.min.css”>
<script type=”text/javascript”>
var data = [
{
name: ‘Programming Languages’,
children: [
{ name: ‘Java’ },
{ name: ‘C’ },
{ name: ‘C++’ },
{ name: ‘PHP’ },
{ name: ‘.Net’ }
]
},
{
name: ‘Top 3 2018 Technologies’,
children: [
{ name: ‘Machine Learning / Artificial Intelligence’ },
{ name: ‘Big data’ },
{ name: ‘Cloud Computing’ } ]
}
];
</script>
<script type=”text/javascript”>
$(document).ready(function(){
$(function() {
$(‘#tree1’).tree({
data: data
});
});
});
</script>
</head>
<body>
<div id=”tree1″></div>
</body>
</html>
[/html]
If you have your data from any webservice url/in any files/ accordingly use
<span class="nx">$</span><span class="p">.</span><span class="nx">getJSON</span><span class="p">(</span><br data-jekyll-commonmark-ghpages="" /> <span class="s1">'/some_url/'</span><span class="p">,</span><br data-jekyll-commonmark-ghpages="" /> <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span><br data-jekyll-commonmark-ghpages="" /> <span class="nx">$</span><span class="p">(</span><span class="s1">'#tree1'</span><span class="p">).</span><span class="nx">tree</span><span class="p">({</span><br data-jekyll-commonmark-ghpages="" /> <span class="na">data</span><span class="p">:</span> <span class="nx">data</span><br data-jekyll-commonmark-ghpages="" /> <span class="p">});</span><br data-jekyll-commonmark-ghpages="" /> <span class="p">}</span><br data-jekyll-commonmark-ghpages="" /><span class="p">);</span>or
$.ajax and populate the data accordingly.
I also created a sample demo page for the above simple example here.
please go through their official site for customization’s: