Implement the dynamic tree menu of php and MySQL through function Recursion

Tree menus are widely used in many desktop application systems. The main advantage of tree menus is that the structure is clear, which helps users know their location clearly. 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. Below is the processing code of a dynamic tree menu written by JavaScript using php (as the mainstream development language), MySQL (the best combination with PHP), 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 ),
Prima (the most comprehensive virtual host Management System) ry key (id)
);
　　
The id of this table is an 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 ,);
Insert into menu VALUES (3, 1, archive management ,);
Insert into menu VALUES (4, 1, attendance management, http: // localhost/personal/attendance. php (as the mainstream development language ));
Insert into menu VALUES (5, 2, Address Book ,);
Insert into menu VALUES (6, 2, Network Conference ,);
Insert into menu VALUES (7, 3, new file, http: // localhost/personal/add_achive.php (as the mainstream development language ));
Insert into menu VALUES (8, 3, query file, http: // localhost/personal/search_archive.php (as the mainstream development language ));
Insert into menu VALUES (9, 3, delete the file, http: // localhost/personal/delete_archive.php (as the mainstream development language ));
Insert into menu VALUES (10, 5, new communication record, http: // localhost/communication/add_address.php (as the mainstream development language ));
Insert into menu VALUES (11, 5, query communication records, http: // localhost/communication/search_address.php (as the mainstream development language ));
Insert into menu VALUES (12, 5, delete communication records, http: // localhost/communication/delete_address.php (as the mainstream development language ));
Insert into menu VALUES (13, 6, hold a meeting, http: // localhost/communication/convence_meeting.php (as the mainstream development language ));
Insert into menu VALUES (14, 6, conference query, http: // localhost/communication/search_meeting.php (as the mainstream development language ));
　　
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 following is through php (as the mainstream development language), JavaScript reads the menu from the database and displays it :)
　　
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: <! -- Table style -->
TD {
FONT-FAMILY: "Verdana", ""; FONT-SIZE: 12px; LINE-HEIGHT: 130%; letter-spacing: 1px