Implement a dynamic tree menu based on PHP and MySQL

Tree menu in many desktop applications have a very wide range of applications, the main advantage is that the structure is clear, so that users are very clear about their current location. But the application of the tree menu on the Web because there is no ideal off-the-shelf component can be used directly, so in general, programmers mainly through JavaScript to implement a number of simple tree structure menu, but these menus are always predefined menu items, and the menu items between the hierarchical relationship, is not conducive to expansion, once you need another menu structure, often need to rewrite, so it is not very convenient to use.

After the study of function recursion, I found that this kind of tree menu can realize dynamic change of the display of tree menu by recursive function, and there is no limit of series. Here is a dynamic tree menu I wrote with Php,mysql,javascript code, if you are interested, and I see how I achieve it:

First, we need a database, in this database, we create the following table:

CREATE TABLE Menu (
ID tinyint (4) not NULL auto_increment,
parent_id tinyint (4) DEFAULT ' 0 ' not NULL,
Name varchar (20),
URL varchar (60),
PRIMARY KEY (ID)
);

This table has an ID of index parent_id to hold the ID number of the previous-level menu, or 0 if it is a level menu.
Name is the title of the menu, which is the menu content to be displayed on the page
URL if a menu is a last-level menu, you need to specify the URL address of the connection, which is used to hold this address, other non-final menu, the field is empty

Well, the database has, you can add some records, the following is my test time, the use of some of the records:

INSERT into Menu VALUES (' 1 ', ' 0 ', ' Personnel Management ', ');
INSERT into Menu VALUES (' 2 ', ' 0 ', ' Communication communication ', ');
INSERT into Menu VALUES (' 3 ', ' 1 ', ' File Management ', ');
INSERT into Menu VALUES (' 4 ', ' 1 ', ' attendance management ', ' http://localhost/personal/attendance.php ');
INSERT into Menu VALUES (' 5 ', ' 2 ', ' Address Book ', ');
INSERT into Menu VALUES (' 6 ', ' 2 ', ' web conferencing ', ');
INSERT into Menu VALUES (' 7 ', ' 3 ', ' New file ', ' http://localhost/personal/add_achive.php ');
INSERT into Menu VALUES (' 8 ', ' 3 ', ' Query file ', ' http://localhost/personal/search_archive.php ');
INSERT into Menu VALUES (' 9 ', ' 3 ', ' delete file ', ' http://localhost/personal/delete_archive.php ');
INSERT into menu VALUES (' 10 ', ' 5 ', ' New communication record ', ' http://localhost/communication/add_address.php ');
INSERT into menu VALUES (' 11 ', ' 5 ', ' Query communication record ', http://localhost/communication/search_address.php ');
INSERT into Menu VALUES (' 12 ', ' 5 ', ' Delete Communication records ', http://localhost/communication/delete_address.php ');
INSERT into menu VALUES (' 13 ', ' 6 ', ' hold a meeting ', ' http://localhost/communication/convence_meeting.php ');
INSERT into Menu VALUES (' 14 ', ' 6 ', ' Meeting query ', ' http://localhost/communication/search_meeting.php ');

When adding records, be sure to note that the parent_id menu must be specified as the ID number of the parent menu, otherwise your menu will not be displayed:

All right! With the database, the following is through the Php,javascript menu from the database to read out and show up:

1. JavaScript script:

function ShowMenu (MENUID)
{
if (menuid.style.display== "None")
{
Menuid.style.display= "";
}
Else
{
Menuid.style.display= "None";
}
}

The script is simple enough to respond to events clicked on a menu click.

2, CSS file:

<!--table Styles-->
TD {
font-family: "Verdana", "Song Body"; font-size:12px; line-height:130%; letter-spacing:1px
}
<!--super Connection style-->
a:link {
COLOR: #990000; font-family: "Verdana", "Song Body"; font-size:12px; Text-decoration:none; letter-spacing:1px
}
a:visited {
COLOR: #990000; font-family: "Verdana", "Song Body"; font-size:12px; Text-decoration:none; letter-spacing:1px
}
a:active {
COLOR: #990000; font-family: "Verdana", "Song Body"; font-size:12px; Text-decoration:none; letter-spacing:1px
}
a:hover {
COLOR: #ff0000; font-family: "Verdana", "Song Body"; font-size:12px; Text-decoration:underline; letter-spacing:1px
}
<!--other styles-->
. Menu {
COLOR: #000000; font-family: "Verdana", "Song Body"; font-size:12px; Cursor:hand
}

Defines some basic style information, such as font, color, hyperlink style, and so on, if you want to change the style, just modify here!

3, the following is my PHP page!

<link href= ' style.css ' rel=stylesheet>
<script language= "JavaScript" src= "Treemenu.js" ></script>
<body>
<?php
Basic variable Settings
$GLOBALS ["ID"] = 1; The ID number used to track the Drop-down menu
$layer = 1; The series used to track the current menu
Connecting to a database
$Con =mysql_connect ("localhost", "root", "");
mysql_select_db ("work");
Extract A Level menu
$sql = "Select * from menu where parent_id=0";
$result =mysql_query ($sql, $Con);
If a level menu exists, the Start menu is displayed
if (mysql_num_rows ($result) >0) Showtreemenu ($Con, $result, $layer, $ID);
//=============================================
Show tree menu Functions Showtreemenu ($con, $result, $layer)
$con: Database connections
$result: Menu Recordset to display
Layer: series of menus to be displayed
//=============================================
function Showtreemenu ($Con, $result, $layer)
{
Number of items to get the menu to display
$numrows =mysql_num_rows ($result);

Start displaying menus, each of which is represented by a table
echo "<table cellpadding= ' 0 ' cellspacing= ' 0 ' border= ' 0 ' >";
for ($rows =0; $rows < $numrows; $rows + +)
{
Import the contents of the current menu item into an array
$menu =mysql_fetch_array ($result);
Extracts a submenu record set for a menu item
$sql = "Select * from menu where parent_id= $menu [id]";
$result _sub=mysql_query ($sql, $Con);
echo "<tr>";
If the menu item has a submenu, add the JavaScript onclick statement
if (mysql_num_rows ($result _sub) >0)
{
echo "<td width= ' ></td > ";
echo "<td class= ' menu ' onclick= ' Javascript:showmenu (menu". $GLOBALS ["ID"]. "); ' > ";
}
Else
{
echo "<td width= ' ></td > ";
echo "<td class= ' menu ' >";
}
If the menu item does not have a submenu and the hyperlink address is specified, it is specified as a super connection.
Otherwise, only the menu name is displayed
if ($menu [url]!= "")
echo "<a href= ' $menu [url] ' > $menu [name]</a>";
Else
echo $menu [name];
echo "
</td>
</tr>
";
If the menu item has a submenu, the submenu is displayed
if (mysql_num_rows ($result _sub) >0)
{
Specify the ID and style of the submenu to correspond to the onclick statement
echo "<tr id=menu". $GLOBALS ["id"]++. "style= ' Display:none ' >";
echo "<td width= ' > </td>";
echo "<td>";
Add 1 to the series
$layer + +;
Recursively call the Showtreemenu () function to generate a submenu
Showtreemenu ($Con, $result _sub, $layer);
submenu processing complete, return to the upper level of recursion, reduce the series by 1
$layer--;
echo "</td></tr>";
}
Continue to display the next menu item
}
echo "</table>";
}
?>
</body>

In the above PHP page, I defined a function showtreemenu (), through this function call, will recursively from the database of each menu item, and displayed on the page: