Bootstrap Treeview with PHP and MySQL

In our previous tutorial you have learned How To Create Dynamic Tree View Menu in PHP, Today in this tutorial you will learn how to create Bootstrap treeview structure with PHP and MySQL.

With Bootstrap, you can easily create treeview menus using Bootstarp treeview plugin that needs JSON data to be passed to create hierarchical tree structure.

Also, read:

In this tutorial we have created JSON data from MySQL using PHP and passed to Bootstrap treeview plugin to create tree structure.

So let’s start the coding
Step 1: First we will create Table structure to stored tree menu nodes.


CREATE TABLE IF NOT EXISTS `treeview` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(200) NOT NULL,
  `text` varchar(200) NOT NULL,
  `link` varchar(200) NOT NULL,
  `parent_id` varchar(11) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1;

Step 2: You need to include Bootstrap library files and bootstrap treeview plugin files. In this tutorial, we have downloaded plugin and kept plugin JS/CSS files in dist directory.

<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>
<link rel="stylesheet" href="dist/bootstrap-treeview.min.css" 
type="text/css" media="all">
<script src="dist/bootstrap-treeview.min.js"></script>

Step 3: Now we will create tree menu container.

<div class="container">
	<h2>Bootstrap Treeview with PHP and MySQL</h2>	
	<div class="row">	
		<div class="col-md-6" id="treeview"></div>	
	</div>		
</div>

Step 4: We will make Ajax request to get JSON data from php server side tree_data.php and passed json data to bootstrap treeview plugin method treeview(). The methiod will set data on div container on which we want to render tree structure. Here we will render data on container id “#treeview”.

jQuery(document).ready(function(){
	jQuery.ajax({
		url: "tree_data.php",
		cache: false,
		success: function(response){
			$('#treeview').treeview({data: response});
		}
	});	
});

Step 5: Now in tree_data.php script, we will data from MySQL database and then create PHP array of all tree nodes and encode into JSON and returns.

<?php
include_once("db_connect.php");
$sql = "SELECT id, name, text, link as href, parent_id 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;
}
// 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']]['nodes'][] = &$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:


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

6 thoughts on “Bootstrap Treeview with PHP and MySQL

  1. Hi sir, thank you very much for this tutorial, its very useful, i have a problem sir i have inserted rows into db its worked fine as above, but after that i was trying to add row parent_id = 0 data, its giving “Uncaught TypeError: Cannot set property ‘nodeId’ of undefined” i dont know what to do please help me sir

  2. hi sir…. its working with ur table fine…. but with same datatype and field name its not working with your script … idownload and used your script only changing name of tabl ein tree_data.php… what could be problem…

  3. Hi, Looks good but I can’t see how the links work? If I add a target into the mysql column called link (defaults in example sql are all #) nothing happens when I click that node in the tree??

Comments are closed.