Parent Child Hierarchy using jqTree in jQuery / Javascript

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:


<!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>

If you have your data from any webservice url/in any files/ accordingly use

$.getJSON(
'/some_url/',
function(data) {
$('#tree1').tree({
data: data
});
}
);

or

$.ajax and populate the data accordingly.

 

I also created a sample demo page for the above simple example here.

jqTree Demo Link

 

please go through their official site for customization’s:

jqTree Official

76 total views, 0 views today

Leave a Reply

Your email address will not be published. Required fields are marked *