Use function recursion to implement dynamic... based on PHP and MySQL..

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 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) 
);

In this table
id is the 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, That 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 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 the database is there, you can add some records. Here are some records I used when doing tests:

INSERT INTO menu VALUES ( '1', '0', '人事管理', ''); 
INSERT INTO menu VALUES ( '2', '0', '通讯交流', ''); 
INSERT INTO menu VALUES ( '3', '1', '档案管理', ''); 
INSERT INTO menu VALUES ( '4', '1', '考勤管理', 'http://localhost/personal/attendance.php'); 
INSERT INTO menu VALUES ( '5', '2', '通讯录', ''); 
INSERT INTO menu VALUES ( '6', '2', '网络会议', ''); 
INSERT INTO menu VALUES ( '7', '3', '新增档案', 'http://localhost/personal/add_achive.php'); 
INSERT INTO menu VALUES ( '8', '3', '查询档案', 'http://localhost/personal/search_archive.php'); 
INSERT INTO menu VALUES ( '9', '3', '删除档案', 'http://localhost/personal/delete_archive.php'); 
INSERT INTO menu VALUES ( '10', '5', '新增通讯记录', 'http://localhost/communication/add_address.php'); 
INSERT INTO menu VALUES ( '11', '5', '查询通讯记录', 'http://localhost/communication/search_address.php'); 
INSERT INTO menu VALUES ( '12', '5', '删除通讯记录', 'http://localhost/communication/delete_address.php'); 
INSERT INTO menu VALUES ( '13', '6', '召开会议', 'http://localhost/communication/convence_meeting.php'); 
INSERT INTO menu VALUES ( '14', '6', '会议查询', 'http://localhost/communication/search_meeting.ph');

When adding records, be sure to pay attention to the parent_id of the non-first-level menu Be sure to specify it as the ID number of the upper-level menu, 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 clicking on a certain menu. of events.

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 fonts, colors, hyperlink styles, 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, start the display of the 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: what needs to be displayed Levels of menu
//============================================== ==
function ShowTreeMenu($Con,$result,$layer)
{
//Get the number of menu items that need to be displayed
$numrows=mysql_num_rows($result);

//Start to display the menu, each submenu Use a table to represent
echo " ";

for($rows=0;$rows<$numrows;$rows++)
{
//Import the contents of the current menu item into the array
$menu=mysql_fetch_array($result) ;

//Extract the submenu record set of menu items
$sql="select * from menu 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 " ";
}
else
{
echo " ";
echo " ";
}
//If the menu item has no submenu and a hyperlink address is specified, it is specified as a hyperlink,
//Otherwise only the menu name is displayed
if($menu[url]! ="")
echo "$menu[name]";
else
echo $menu[name];
echo "



";

//If the menu item has a submenu, display the submenu
if(mysql_num_rows($result_sub)>0)
{
//Specify the ID and style of the submenu to correspond to the onClick statement
echo " ";
echo " ";
echo " ";
//Will The series increases by 1
$layer++;
//Recursively call the ShowTreeMenu() function to generate a submenu
ShowTreeMenu($Con,$result_sub,$layer);
//The submenu processing is completed and returns to the previous layer of the recursion. Decrease the series by 1
$layer--;
echo "
";
}
//Continue to display the next menu item
}
echo " ";
}
?>



in the php page above Inside, I defined a function ShowTreeMenu(). Through the call of this function, each menu item will be called recursively from the database and displayed on the page:)

Want to get more related content articles Please pay attention to the PHP Chinese website (www.php.cn)!