Create Treeview with jsTree, PHP and MySQL

In our previous tutorial you have learned How To Create Dynamic Tree View Menu in PHP, here you will learn how to create treeview structure using jsTree, a popular jQuery plugin. The jsTree is feature rich jQuewry plugin that helps to create dynamic treeview menu using HTML & JSON data sources and AJAX loading. The plguin is easily extendable, configurable and fully responsive with various callback methods.

In this tutorial, you will learn how to create dynamic tree view menu using jsTree, PHP and MySQL. At the end of the tutorial, you can view live demo and download example source code.

So let’s start the coding

In this example we will use following file structure to create treeview menu.

• index.php: This is main file to display treeview menu structure


• jsTree: This folder will contains all js/css and images files from jsTree plugin.


• tree_data.php: This PHP script used to fetch tree nodes from database and convert them into json object.

Steps1:First we will create Table structure to stored tree menu items.
CREATE TABLE IF NOT EXISTS `treeview` (
`id` int(11) NOT NULL,
`name` varchar(200) NOT NULL,
`text` varchar(200) NOT NULL,
`link` varchar(200) NOT NULL,
`parent_id` varchar(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;


Steps2:For this example, we have created index.php and included Bootstrap library files as we have handled design using Bootstrap. As we are going to use jsTree jQuery plguin to create tree view, so included JavaScript and CSS of this plugin.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="jstree/style.min.css" />
<script src="jstree/jstree.min.js"></script>


Steps3:Now we will create div container tree-data-container in index.php to keep tree view data.
<div id="tree-data-container"></div>


Steps4: Now we will call jsTree method on div container tree-data-container to display load tree data by making ajax request to server side PHP script tree_data.php.

<script type="text/javascript">
$(document).ready(function(){
$('#tree-data-container').jstree({
'plugins': ["wholerow", "checkbox"],
'core' : {
'data' : {
"url" : "tree_data.php",
"dataType" : "json"
}
}
})
});
</script>


Steps5:Finally in PHP script tree_data.php, we will get data from MySQL database table treeview and create PHP array of all items. Then encoded and return created PHP array into json using json_encode to be executed by jsTree functions ti display treeview structure.
<?php
include_once("db_connect.php");
$sql = "SELECT * FROM `treeview`";
$res = mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn));
//iterate on results row and create new index array of data
while( $row = mysqli_fetch_assoc($res) ) {
$data[] = $row;
}
$itemsByReference = array();
// Build array of item references:
foreach($data as $key => &$item) {
$itemsByReference[$item['id']] = &$item;
// Children array:
$itemsByReference[$item['id']]['children'] = array();
// Empty data class (so that json_encode adds "data: {}" )
$itemsByReference[$item['id']]['data'] = new StdClass();
}
// Set items as children of the relevant parent item.
foreach($data as $key => &$item)
if($item['parent_id'] && isset($itemsByReference[$item['parent_id']]))
$itemsByReference [$item['parent_id']]['children'][] = &$item;
// Remove items that were added to parents elsewhere:
foreach($data as $key => &$item) {
if($item['parent_id'] && isset($itemsByReference[$item['parent_id']]))
unset($data[$key]);
}
// Encode:
echo json_encode($data);
?>


You can view the live demo from the Demo link and can download the script from the Download link below.
Demo [sociallocker]Download[/sociallocker]