Function recursion to implement PHP and MySQL dynamic tree menu_PHP tutorial

Tree menus are widely used in many desktop application systems. Its main advantage is that the structure is clear, which helps users clearly know their current location. However, in the application of tree menus on the web, there are no ideal ready-made components that can be used directly. Therefore, in general, programmers mainly use JavaScript to implement some simple tree structure menus, but these menus are often prepared in advance. Defining each menu item and the hierarchical relationship between each menu item is not conducive to expansion. Once another menu structure is needed, it often needs to be rewritten, so it is not very convenient to use.
　
After studying function recursion, I found that this kind of tree menu can dynamically change the display of the tree menu through recursive functions, and there is no limit on the number of series. The following is the processing code for a dynamic tree menu that I wrote using php(as the current mainstream development language), MySQL(the best combination with PHP), and JavaScript. If you are interested, come with me to see how I implement 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),
Prima(The most complete virtual host management system)RY KEY (id)
);

The id in this table is the index
parent_id is used to save the previous menu The id number, if it is a first-level menu, it is 0
Name is the name of the menu, which is the menu content to be displayed on the page
url If a menu is the last-level menu, you need to specify the url of the connection Address, this field is used to save this address. For other non-last-level menus, this field is empty
　
Okay, now that the database is available, you can add some records. Here is when I did the test , some records used:
　INSERT INTO menu VALUES (1, 0, personnel management,);
　INSERT INTO menu VALUES (2, 0, communication,);
　INSERT INTO menu VALUES (3, 1, file management, );
　INSERT INTO menu VALUES ( 4, 1, attendance management, http://localhost/personal/attendance.php(as the current mainstream development language));
　INSERT INTO menu VALUES (5, 2, address book,);
　INSERT INTO menu VALUES (6, 2, online meeting,);
　INSERT INTO menu VALUES (7, 3, add new file, http://localhost/personal/add_achive.php(as the current mainstream development language));
　INSERT INTO menu VALUES (8, 3, query files, http://localhost/personal /search_archive.php(as the current mainstream development language));
　INSERT INTO menu VALUES (9, 3, delete files, http://localhost/personal/delete_archive.php (As the current mainstream development language));
　INSERT INTO menu VALUES (10, 5, add communication records, http://localhost/communication/add_address.php(As the current Mainstream development language));
　INSERT INTO menu VALUES (11, 5, query communication records, http://localhost/communication/search_address.php(as the current mainstream development language));
　INSERT INTO menu VALUES (12, 5, delete communication records, http://localhost/communication/delete_address.php(as the current mainstream development language));
INSERT INTO menu VALUES ( 13, 6, hold a meeting, http://localhost/communication/convence_meeting.php(as the current mainstream development language));
　INSERT INTO menu VALUES ( 14, 6. Meeting query, http://localhost/communication/search_meeting.php(as the current mainstream development language));
　
When adding records, you must pay attention, unless The parent_id of the first-level menu must be specified as the ID number of the upper-level menu, otherwise your menu will not be displayed:)
　
OK! With the database, the following is to read the menu from the database and display it through php (as the current mainstream development language) and JavaScript:)
　
1. JavaScript script:
　function ShowMenu(MenuID)
　{
　if(MenuID.style.display=="none")
　{
　MenuID.style.display="";
　}
else
　{
　MenuID.style.display="none";
　}
　}
　This script is very simple and is used to respond to the event of a menu being clicked.
　
　2. CSS file:
　TD {
　FONT-FAMILY: "Verdana", "宋体"; FONT-SIZE: 12px; LINE- HEIGHT: 130%; letter-spacing:1px