Implement the dynamic tree menu _ php Basics based on php and MySQL using function recursion

Using function recursion to implement a dynamic tree menu based on php and MySQL is widely used in many desktop application systems. Its main advantage is that the structure is clear, this helps users clearly know where they are currently. However, tree menu applications on the web can be directly used because there is no ideal ready-made component. In general, programmers mainly implement simple tree-structure menus through JavaScript, however, these menus are usually pre-defined for each menu item and the hierarchical relationship between menu items, which is not conducive to expansion. once another menu structure is required, it is often necessary to re-compile the menu, therefore, it is not very convenient to use.

After studying the recursion of functions, I found that this kind of tree menu can be implemented through recursive functions, so that the display of tree menus can be dynamically changed without the limit of series. The following is the processing code of a dynamic tree menu written in php, MySQL, and JavaScript. if you are interested, let's take a look at how I implement it with me :)

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
Id is index
Parent_id is used to save the ID number of the top-level menu. if it is a top-level menu, it is 0.
Name is the name of the menu, that is, the menu content to be displayed on the page.
Url if a menu is the last menu, you need to specify the url address of the connection. This field is used to save this address. Other non-last menu, this field is blank

Now that the database is ready, you can add some records. Below are some records used during the test:

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 ','');
Insert into menu VALUES ('6', '2', 'network conferencing ','');
Insert into menu VALUES ('7', '3', 'Add files', 'http: // localhost/personal/add_achive.php ');
Insert into menu VALUES ('8', '3', 'queryfile', 'http: // localhost/personal/search_archive.php ');
Insert into menu VALUES ('9', '3', 'delete files', 'http: // localhost/personal/delete_archive.php ');
Insert into menu VALUES ('10', '5', 'Add 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 record ', http: // localhost/communication/delete_address.php ');
Insert into menu VALUES ('13', '6', 'convene a Meeting ', 'http: // localhost/communication/convence_meeting.php ');
Insert into menu VALUES ('14', '6', 'conference query', 'http: // localhost/communication/search_meeting.php ');

When adding a record, you must note that the parent_id of a non-level menu must be specified as the ID of the parent menu; otherwise, your menu will not be displayed :)

Okay! With the database, the menu is read from the database through php and JavaScript and displayed :)

1. JavaScript script:
Function ShowMenu (MenuID)
{
If (MenuID. style. display = "none ")
{
MenuID. style. display = "";
}
Else
{
MenuID. style. display = "none ";
}
}

This script is very simple. it is used to respond to the event of clicking a menu.

2. CSS file:

TD {
FONT-FAMILY: "Verdana", ""; FONT-SIZE: 12px; LINE-HEIGHT: 130%; letter-spacing: 1px
}

A: link {
COLOR: #990000; FONT-FAMILY: "Verdana", ""; FONT-SIZE: 12px; TEXT-DECORATION: none; letter-spacing: 1px
}
A: visited {
COLOR: #990000; FONT-FAMILY: "Verdana", ""; FONT-SIZE: 12px; TEXT-DECORATION: none; letter-spacing: 1px
}
A: active {
COLOR: #990000; FONT-FAMILY: "Verdana", ""; FONT-SIZE: 12px; TEXT-DECORATION: none; letter-spacing: 1px
}
A: hover {
COLOR: # ff0000; FONT-FAMILY: "Verdana", ""; FONT-SIZE: 12px; TEXT-DECORATION: underline; letter-spacing: 1px
}

. Menu {
COLOR: #000000; FONT-FAMILY: "Verdana", ""; FONT-SIZE: 12px; CURSOR: hand
}

Some basic style information is defined, such as the font, color, and super-connected style. if you want to change the style, you just need to modify it here!

3. The following is my php page!