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!

//Basic variable settings
$globals["id"] =1; / /Used to track the id number of the drop-down menu
$layer=1; //Used to track the level of the current menu

//Connect to the database
$con=mysql_connect("localhost"," root","");
mysql_select_db("work");

//Extract the first-level menu
$sql="select * from menu where parent_id=0";
$ result=mysql_query($sql,$con);

//If the first-level menu exists, the display of the start menu
if(mysql_num_rows($result)>0) showtreemenu($con,$result ,$layer,$id);


//================================ ==============
//Show tree menu function showtreemenu($con,$result,$layer)
//$con: database connection
// $result: The menu record set that needs to be displayed
//layer: The level of the menu that needs to be displayed
//======================== =======================
function showtreemenu($con,$result,$layer)
{
//Get the required display The number of menu items
$numrows=mysql_num_rows($result);

//Start to display the menu, each submenu is represented by a table
echo "";

for($rows=0;$rows<$numrows;$rows++)
{
//Change the current menu item The content of the import array
$menu=mysql_fetch_array($result);

//Extract the submenu record set of the menu item
$sql="select * from menu where parent_id=$menu[id ]";
$result_sub=mysql_query($sql,$con);

echo "";
//If the menu item has a submenu, add a javascript onclick statement
if(mysql_num_rows($result_sub)>0)
{
echo "";
echo "";
echo "

";

//If this If the menu item has a submenu, the submenu will be displayed
if(mysql_num_rows($result_sub)>0)
{
//Specify the id and style of the submenu to correspond to the onclick statement
echo "";
echo "";
echo "";
}
//Continue to display the next menu item
}
echo "

	"; } else { echo "		"; } //If the menu item has no submenu and a hyperlink address is specified, it is specified as a hyperlink. //Otherwise Show only menu name if($menu[url]!="") echo "$menu[name]"; else echo $menu[name]; echo "
	"; //Increase the series by 1 $layer++; //Recursively call the showtreemenu() function to generate a submenu showtreemenu($con,$result_sub,$layer); //The submenu processing is completed, return to the previous level of recursion, and reduce the series by 1 $layer--; echo "

";
}
?> Recursively call out each menu item and display it on the page:)

http://www.bkjia.com/PHPjc/364080.html

www.bkjia.com