How to Create Dynamic Tree View Menu

Hi,
In this tutorial I will describe to you, how to create tree view structure menu with help of php, mysql and css. It’s very common to use 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 task list menu tree view based on project task. A single task may be divided number of subtask.So I need to add subtask dynamically as meanwhile time its reflect also on tree view.

Below steps to produce tree view menu:

Step 1:First we will Create treeview table in mysql database. this table contains four column.id is the task id and name is the task name.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
-
-- 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: Tree view recursive method
I have created below tree createTreeView() method which call recursive if current task id is greater than prev task id.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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 " </li> ";

    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: Create index file to show tree view.
This is main file of treeview example here we will call createTreeView() method with required parameters.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<body>
<link rel="stylesheet" type="text/css" href="_styles.css" media="screen">
<?php
mysql_connect('localhost', 'root');
mysql_select_db('test');


$qry="SELECT * FROM treeview_items";
$result=mysql_query($qry);


$arrayCategories = array();

while($row = mysql_fetch_assoc($result)){ 
 $arrayCategories[$row['id']] = array("parent_id" => $row['parent_id'], "name" =>                       
 $row['name']);   
  }
?>
<div id="content" class="general-style1">
<?php
if(mysql_num_rows($result)!=0)
{
?>
<?php 

createTreeView($arrayCategories, 0); ?>
<?php
}
?>

</div>
</body>
</html>

Step 4: Create CSS file style.css
Here we will write all css related class, currently I am using order list to create tree view. you can also change image path here.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
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 !important;
    }
        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 !important; 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 */ }

Result:

treeview

The following two tabs change content below.
Hi, This is Parvez Alam from India. I am software developer with 4 years’ experience in web development. I have submitted articles on PHP, Mysql, Magento,CSS, HTML, jQuery, web designing and social API. You can subscribe to my blog via RSS/Twitter/Google plus and Facebook. parvez1487(at)gmail(dot)com

64 thoughts on “How to Create Dynamic Tree View Menu

  1. Hi Parverz can you send me the complete source code of
    How to Create Dynamic Tree View Menu
    because i couldn’t run this,thanks

  2. Please could create a treeview based on this table, and the table indicador would be the first person and below them show the name of the person who registered through the indicador

    • you can enter person(A) name under ‘name’ column. if it has registered persons(B) sets parent id 0 for A person and set perant id od A person to B member.

  3. Can you tell me, how to show tree view by choosing a particular task? Suppose I want show tree from “task3″. then how do I fix this issue? please help me, its very urgent. Thanks In Advance

  4. i see your code this is very good effort but i want to make dynamic tree having 2 childs for example 2/2 tree where a parent has two child and so on plz if you help me i am thankful to you
    best regards

  5. Do you have any idea if we want to do the same work but the hierarchy is divided in multiple in many records.
    something like that :
    ————————————————————————-
    Level1 level2 level3 level4
    ————————————————————————-

    for each level1 there is one or more corresponding from the level2 and so on for the rest (level3 and level4)

    thanks

  6. Hi, I have just tested your menu and it works great so far. Thank you for that.
    But I have a question: is it possible to put a text field after each label for tag?
    I would like to use this to fill a mysql datadase with it.

    Thanks in advance

    Anton

  7. Hi, I could not run the codes, I’m beginner in php and I don’t know what is the problem. These are my errors:

    Warning: mysql_fetch_assoc() expects parameter 1 to be resource, boolean given in /Applications/XAMPP/xamppfiles/htdocs/TestFolder/treeview/treeview.php on line 14

    Warning: mysql_num_rows() expects parameter 1 to be resource, boolean given in /Applications/XAMPP/xamppfiles/htdocs/TestFolder/treeview/treeview.php on line 65

    Could you help me please.
    Thank you.

    • Hi,
      You have error on ‘while($row = mysql_fetch_assoc($result)’ line.You have passed $result as Boolean instead of resource.

      Have you cheked below query:
      $qry=”SELECT * FROM treeview_items”;
      $result=mysql_query($qry);

      Please varify $results contains data.

  8. it works…
    but… how and where i put my url or links…
    and when i click menu (task3), (task1) expand.??
    would you help me..??

  9. I’m having trouble with $arrayCategories[$row['id']] = array(“parent_id” => $row['parent_id'], “name” =>

    ['id'] ?

    can you help me please,
    thxs

  10. When I used this code, my check-box is located on the next line instead of inline with the folder icon. Although, I need to click above the box to expand and contract the tree branch. How do I move the check box up as is displayed in your picture example?

    Thank you.

  11. Parvez,

    Thank you for the quick reply. I’m really new to the PHP and CSS world. How can I make this open into a new window all together instead of being inside an existing frame on my web-site?

    Thanks again,
    Victor

  12. Ok it’s work i add some query like this:
    $sql=SELECT
    id,
    pid As parent_id,
    pn As parent_name,
    GROUP_CONCAT(cn separator ‘, ‘) child_name
    FROM my_tbl
    WHERE
    GROUP BY parent_name
    ORDER BY parent_id
    but how can i click to target_url that i want?

    thxs anyway

  13. Hello
    I like very much your tree view.
    Do you know if there is a way to capture the event when selectin one of the node?
    How?
    Thanks

  14. hi Parvez
    it is very useful for me.
    and my requirement is when i click on sub menu it should be highlighted and stay there.
    it should not be collapse.

  15. Hi Parvez

    Thanks in advance.
    i am new to php. and i am not having knowledge of jquey,
    please me the modified code to my email.
    thank you..

  16. Hi Parvez

    This is a great example and works very well. The only thing I am struggling with is how to capture which node a user has selected do you have any extended examples on how to do this?

    Thanks again.

    • Hi Stephen,
      Thanks,I have an idea for your problem,You can add an attribute on each node which value would be ‘node name’, Now you need to capture ‘on click’ event with jquery and get node name.

      Thanks
      Parvez Alam

  17. Hi Parvez
    This is a very good example but if you click on any task(not on plus and minus) resulting the collapse and expand the first root task.
    How can we fix this?
    thanks in advance

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>