How to Create Dynamic Tree View Menu in PHP

Recently I was working on a PHP project which require a dynamic treeview structure to display items at multilevel. I have tried to search and find some useful solutions but these were not fully dynamic as it only had options for few levels. As I was looking for solution to create infinite dynamic treeview structure from MySQL database, but not find complete solution to implement as per requirement. So at last I have started to create my own and finally create it using PHP and MySQL.

The concept of this script is very simple and you can use it to create menus, categories or anything else that has unknown number of subs items. I have created a database table "menus" that have columns like id, label and parent to create tree structure. I have got all records using MySQL SELECT query and then create dynamic treeview structure at nth level. I have also design it to make it collapsible.

So go through the simple steps to create dynamic treeview structure.

1- First Create MySQL Table with Data:
The SQL table "menus" has 5 columns id(This is a unique identifier), label(This is title of item), link(Link of an item)p, parent(id of parent for the child) and sort(display order of items).

CREATE TABLE IF NOT EXISTS `menus` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `label` varchar(50) NOT NULL,
  `link` varchar(100) NOT NULL,
  `parent` int(11) NOT NULL DEFAULT '0',
  `sort` int(11) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=17 ;

2- Insert Data into MySQL Table:
Now you need to insert some data into "menus" table to create tree view structure. Use below inserts statement to insert data.

INSERT INTO `menus` (`id`, `label`, `link`, `parent`, `sort`) VALUES
(1, 'PHP', '#', 0, 0),
(2, 'Tutorials', '#', 1, NULL),
(3, 'Scripts', '#', 1, NULL),
(4, 'Arrays', '#', 2, NULL),
(5, 'Operators', '#', 2, NULL),
(6, 'Arithmetic operators', '#', 5, NULL),
(7, 'Assignment operators', '$', 5, NULL),
(8, 'Java', '#', 0, NULL),
(9, 'Tutorials', '', 8, NULL),
(10, 'Programs', '', 8, NULL),
(11, 'JavaScript', '#', 0, NULL),
(12, 'MySQL', '#', 0, NULL),
(13, 'CSS', '', 0, NULL),
(14, 'Tutorials', '', 13, NULL),
(15, 'Servlet', '', 9, NULL),
(16, 'JSP', '', 9, NULL);

3- Get Data From MySQL Table:
Now we will get data from "menus" table and store in an array to pass in function createTreeView() to create treeview structure.

<?php
$sql = "SELECT id, label, link, parent FROM menus ORDER BY parent, sort, label";
$result = mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn));
// Create an array to conatin a list of items and parents
$menus = array(
	'items' => array(),
	'parents' => array()
);
// Builds the array lists with data from the SQL result
while ($items = mysqli_fetch_assoc($result)) {
	// Create current menus item id into array
	$menus['items'][$items['id']] = $items;
	// Creates list of all items with children
	$menus['parents'][$items['parent']][] = $items['id'];
}
// Print all tree view menus 
echo createTreeView(0, $menus);
?>

4- Create Dynamic Treeview Structure:
This is a function createTreeView() that works recursively to create dynamic treeview menus at nth level.

<?php
// function to create dynamic treeview menus
function createTreeView($parent, $menu) {
   $html = "";
   if (isset($menu['parents'][$parent])) {
      $html .= "
      &amp;amp;lt;ol class='tree'&amp;amp;gt;";
       foreach ($menu['parents'][$parent] as $itemId) {
          if(!isset($menu['parents'][$itemId])) {
             $html .= "&amp;amp;lt;li&amp;amp;gt;&amp;amp;lt;label for='subfolder2'
&amp;amp;gt;&amp;amp;lt;a href='".$menu['items'][$itemId]['link']."'&amp;amp;gt;"
.$menu['items'][$itemId]['label']."&amp;amp;lt;/a&amp;amp;gt;&amp;amp;lt;/label&amp;amp;gt;
 &amp;amp;lt;input type='checkbox' name='subfolder2'/&amp;amp;gt;&amp;amp;lt;/li&amp;amp;gt;";
          }
          if(isset($menu['parents'][$itemId])) {
             $html .= "
             &amp;amp;lt;li&amp;amp;gt;&amp;amp;lt;label for='subfolder2'&amp;amp;gt;&amp;amp;
lt;a href='".$menu['items'][$itemId]['link']."'&amp;amp;gt;".$menu['items'][$itemId]['label']
."&amp;amp;lt;/a&amp;amp;gt;&amp;amp;lt;/label&amp;amp;gt; &amp;amp;lt;input type='checkbox' name='subfolder2'/
&amp;amp;
gt;";
             $html .= createTreeView($itemId, $menu);
             $html .= "&amp;amp;lt;/li&amp;amp;gt;";
          }
       }
       $html .= "&amp;amp;lt;/ol&amp;amp;gt;";
   }
   return $html;
}
?>

5- Design Treeview Collapsible:
Now time to design treeview as collapsible tree structure.

/* CSS to style Treeview menu  */
ol.tree {
	padding: 0 0 0 30px;
	width: 300px;
}
li { 
	position: relative; 
	margin-left: -15px;
	list-style: none;
}      
li input {
	position: absolute;
	left: 0;
	margin-left: 0;
	opacity: 0;
	z-index: 2;
	cursor: pointer;
	height: 1em;
	width: 1em;
	top: 0;
}
li input + ol {
	background: url(images/toggle-small-expand.png) 40px 0 no-repeat;
	margin: -1.600em 0px 8px -44px; 
	height: 1em;
}
li input + ol > li { 
	display: none; 
	margin-left: -14px !important; 
	padding-left: 1px; 
}
li label {
	background: url(images/folder.png) 15px 1px no-repeat;
	cursor: pointer;
	display: block;
	padding-left: 37px;
}
li input:checked + ol {
	background: url(images/toggle-small.png) 40px 5px no-repeat;
	margin: -1.96em 0 0 -44px; 
	padding: 1.563em 0 0 80px;
	height: auto;
}
li input:checked + ol > li { 
	display: block; 
	margin: 8px 0px 0px 0.125em;
}
li input:checked + ol > li:last-child { 
	margin: 8px 0 0.063em;
}

You can view the demo link and also download complete demo script from below links.

Demo [sociallocker]Download[/sociallocker]