How to Create Dynamic Tree View Menu

In this tutorial, I will describe how to create dynamic tree view menu using PHP, MySQL and css. It’s very common functionality in any web project, I have seen a lot of code sample through goggling and I have created treeview menu based on search.

Actually, I need to create a task list tree view menu based on project task. A single task may be divided number of subtask, So I need to add dynamically sub-task into task tree and meanwhile time its reflect into tree view.

You can also checkout other tutorial of TreeView Menu,

• Create, Rename and Delete Node using JSTree,PHP and MySQL
• How to Create Dynamic Tree View Menu
• Dynamic Tree with JSTree, PHP and MySQL
• 10+ Most Popular jQuery Tree Menu Plugin

Create Dynamically Treeview Menu Using PHP & MySQL

Let’s create treeview based on MySQL and css. We will create database table which hold all the tree menu information.

Step 1- Create MySQL table

First, we will Create treeview table in MySQL database. this table contains four column-

• id – This table field hold the task id.
• title – This column will hold the menu title.
• parent_id – This column will use to store parent id of menu and name is the task name.

-
-- Table structure for table `treeview_items`
--

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

--
-- Dumping data for table `treeview_items`
--

INSERT INTO `treeview_items` (`id`, `name`, `title`, `parent_id`) VALUES
(1, 'task1', 'task1title', '2'),
(2, 'task2', 'task2title', '0'),
(3, 'task3', 'task1title3', '0'),
(4, 'task4', 'task2title4', '3'),
(5, 'task4', 'task1title4', '3'),
(6, 'task5', 'task2title5', '5');

Step 2: Created index.php file and created createTreeView() method. This method is recursive if current task id is greater than prev task id.

function createTreeView($array, $currentParent, $currLevel = 0, $prevLevel = -1) {

foreach ($array as $categoryId => $category) {

if ($currentParent == $category['parent_id']) {                       
    if ($currLevel > $prevLevel) echo "



<ol class="tree"> "; 

    if ($currLevel == $prevLevel) echo "  ";

    echo '



  <li> <label for="subfolder2">'.$category['name'].'</label> <input type="checkbox" name="subfolder2">';

    if ($currLevel > $prevLevel) { $prevLevel = $currLevel; }

    $currLevel++; 

    createTreeView ($array, $categoryId, $currLevel, $prevLevel);

    $currLevel--;               
    }   

}

if ($currLevel == $prevLevel) echo "</li>



</ol>



";

}   

Step 3: Add below code into index.php file to display tree view menu.This is main file of treeview example, Here we will call createTreeView() method with required parameters.

        <link rel="stylesheet" type="text/css" href="_styles.css" media="screen">
<?php
//mysql_connect('localhost', 'root');
//mysql_select_db('test');
$con = mysqli_connect('localhost', 'root', 'pass', 'test');
if (mysqli_connect_errno())
{
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

$qry="SELECT * FROM treeview_items";
$result=mysqli_query($con, $qry);

//$result=mysql_query($qry);

$arrayCategories = array();

while($row = mysqli_fetch_assoc($result)){ 
 $arrayCategories[$row['id']] = array("parent_id" =--> $row['parent_id'], "name" =>                       
 $row['name']);   
  }
?>




<div id="content" class="general-style1">
<?php
if(mysqli_num_rows($result)!=0)
{
?-->
<?php 
createTreeView($arrayCategories, 0); ?-->
<?php
}
?-->

</div>

Step 4: Let’s create a style.css CSS file, This file contains all css related classes with in it, Currently I am using order list to create tree view. You can also change image path here as per your image location.

img { border: none; }
input, select, textarea, th, td { font-size: 1em; }
 
/* CSS Tree menu styles */ol.tree
{
 padding: 0 0 0 30px;
 width: 300px;
}
 li 
 { 
  position: relative; 
  margin-left: -15px;
  list-style: none;
 }
 li.file
 {
  margin-left: -1px ;
 }
  li.file a
  {
   background: url(document.png) 0 0 no-repeat;
   color: #fff;
   padding-left: 21px;
   text-decoration: none;
   display: block;
  }
  li.file a[href *= '.pdf'] { background: url(document.png) 0 0 no-repeat; }
  li.file a[href *= '.html'] { background: url(document.png) 0 0 no-repeat; }
  li.file a[href $= '.css'] { background: url(document.png) 0 0 no-repeat; }
  li.file a[href $= '.js']  { background: url(document.png) 0 0 no-repeat; }
 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(toggle-small-expand.png) 40px 0 no-repeat;
   margin: -0.938em 0 0 -44px; /* 15px */   height: 1em;
  }
  li input + ol > li { display: none; margin-left: -14px ; padding-left: 1px; }
 li label
 {
  background: url(folder-horizontal.png) 15px 1px no-repeat;
  cursor: pointer;
  display: block;
  padding-left: 37px;
 }

 li input:checked + ol
 {
  background: url(toggle-small.png) 40px 5px no-repeat;
  margin: -1.25em 0 0 -44px; /* 20px */  padding: 1.563em 0 0 80px;
  height: auto;
 }
  li input:checked + ol > li { display: block; margin: 0 0 0.125em;  /* 2px */}
  li input:checked + ol > li:last-child { margin: 0 0 0.063em; /* 1px */ }

Demo and Download Source Code