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.

Also, read:

• DataTable Pagination using PHP & MySQL
• Create Advance Pagination with PHP and MySQL
• Create Bootstrap Table Pagination with jQuery

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 may also like:

• Star Rating System with Ajax, PHP and MySQL
• Create Event Calendar with jQuery, PHP and MySQL
• Build Your Own CAPTCHA Script with PHP
• Convert Unix Timestamp To Readable Date Time in PHP
• Inventory Management System with Ajax, PHP & MySQL
• Create Live Editable Table with jQuery, PHP and MySQL
• Live Add Edit Delete datatables Records with Ajax, PHP and MySQL
• Stripe Payment Gateway Integration in PHP
• Export Data to Excel with PHP and MySQL
• Star Rating System with Ajax, PHP and MySQL
• Create Dynamic Bootstrap Tabs with PHP & MySQL
• How To Create Simple REST API in PHP

You can view the live demo from the Demo link and can download the script from the Download link below.
Demo Download