Implement dynamic tree menu based on PHP and MySQL_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 I wrote using php, mysql, and javascript. If you are interested, come with me to see how I implement it:)

First of all, we A database is needed. 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)
);

The
id in this table is Index
parent_id is used to save the id number of the upper-level menu, 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 For the last-level menu, you need to specify the URL address of the connection. This field is used to save this address. For other non-last-level menus, this field is empty

Okay, now that you have the database, you can Added some records, here are some records I used when doing testing:
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');
insert into menu values ​​( '5', '2', 'Address Book', '');
insert into menu values ​​( '6', '2', 'Web conference', '');
insert into menu values ​​( '7', '3', 'Add file' , 'http://localhost/personal/add_achive.php');
insert into menu values ​​( '8', '3', 'Search archive', 'http://localhost/personal/search_archive.php' );
insert into menu values ​​( '9', '3', 'Delete archive', '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', 'Meeting Query', 'http://localhost/communication/search_meeting.php');

When adding records, be sure to note that the parent_id of a non-first-level menu must be specified as the id of the upper-level menu number, otherwise your menu will not be displayed:)

Okay! With the database, the following is to read the menu from the database through php and javascript and display 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 click event of a certain 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
}

defines some basic style information, such as font, color, super The connection style, etc., if you want to change the style, just modify it here!

3. Below is my php page!