Simple Recursive PHP Tree Menu Example

Recursion. It can be a bit to get your head around at first but it can often create a lightweight, robust and elegant solution.

This is a pretty basic example of recursion using PHP which can display a list based tree of a catalogue or any sort of data which has parents, children and end nodes like products.

An example of recursion

For this example to work you need to have a database structure which has a table for categories and a table for products. Each product and category has a parent, with the root element having a parent of 0.

It is easiest to download the mysql dump of the two tables, the images for the tree and the php script for displaying the data in a tree from below:

Tree Menu
Recursion MySQL Dump
Images for expanding/contracting the tree

Once you have created the database, the script will do all the rest. Basically the data will appear as a tree which will have as many branches as categories and as many nodes as products.

The script will happily extend to any number of categories and products (using recursion), but I did not write it with a lot of categories and products in mind so it may not perform well under large loads.

A (brief) explanation of a recursive function:

The core function of the script is actually pretty simple once you get a handle on it, all the extra javascript stuff is just to make it look cool.

The display_children() function gets all the children for the desired parent out of the database. It has a list of children at this point that it is going to loop through, but on the first iteration, when the function gets to the first child, it calls itself again to find any children for this first child - this is recursion.

So it has gone from the root of your hierarchical data (if you pass it a parent id of 0), it has gathered all the children for the root category, it starts looping through them but that process is interrupted* by calling the same function again to try and find any children for the child category that it is currently 'looking at'.

*It is important to get the idea that the process of looping through all the children is only temporarily interrupted, php has these stored in the stack of things it has to do. So once the script has finished being interrupted (by calling itself) it will go back to looping through the original children.

The function gets interrupted several times, but we never have to worry about it forgetting to get back to the original task, that's part of the beauty of recursion.

Tracking back up the stack recursively

After the function is called on a child category and it finds that this category does not in fact have any children categories under it it starts back on the process of looping through the rest of the children one layer up in the heirarchy and finding any of their categories.

Once the function has finished going through all the child categories for this parent it will go and find the products for this parent also, after this is achieved it can continue tracking back up the stack and continuing its business.

The Javascript to display the tree

The javascript is there so that we can click on the items of the tree to expand that node. Another function that the javascript fulfills is highlighting children which do not have any further child nodes or products and therefore do not need to be expanded.

This part is not quite finished as I tacked it on as a last measure and may need to change some of the structure of the outputted HTML in order for it to work completely. Currently it will highlight the node but it does not change the icon next to the node to show that it can't be clicked on.

Feel free to give it a whirl and let me know what you think, feedback, criticism etc. etc. I was largely influenced by these smart guys when I started this little project so check out their site.

Update:
Tree menu .zip download should be working now.