Tree menu has a very wide range of applications in many desktop applications, the main advantage is that the structure is clear, so that users can very clearly know the location of their current. But the application of the tree menu on the Web because there is no ideal ready-made components can be used directly, so in general, programmers mainly through JavaScript to implement some simple tree structure menu, but these menus are often in advance to set the menu items, as well as the various menu items in the hierarchical relationship, is not conducive to expansion, once another menu structure needs to be rewritten, so it is not very convenient to use.
Through the study of function recursion, I found that this kind of tree menu can be changed dynamically by recursive function, so that the display of the tree menu is not limited by the series. Here is the processing code of a dynamic tree menu I wrote with Php,mysql,javascript, and if you are interested, come and see how I realized it:)
First, we need a database in which 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 indexed
PARENT_ID is used to save the ID number of the previous menu, or 0 if it is a first-level menu
Name is the menu, which is the menu content to display on the page
URL if a menu is an end-level menu, you need to specify the URL address of the connection, which is the other non-end menu that is used to hold this address, the field is empty
Well, the database is there, you can add some records, here are some of the records I used when I did the test:
Insert into menu values (' 1 ', ' 0 ', ' Personnel Management ', ');
Insert into menu values (' 2 ', ' 0 ', ' Communication 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 ', ' contacts ', ');
Insert into menu values (' 6 ', ' 2 ', ' web conferencing ', ');
Insert into menu values (' 7 ', ' 3 ', ' Add file ', ' http://localhost/personal/add_achive.php ');
Insert into menu values (' 8 ', ' 3 ', ' Query file ', ' 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 ', ' New 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 ', ' Hold meeting ', ' http://localhost/communication/convence_meeting.php ');
Insert into menu values (' 14 ', ' 6 ', ' Meeting query ', ' http://localhost/communication/search_meeting.php ');
When adding records, it is important to note that non-level menu parent_id must be specified as the ID number of the parent menu, otherwise your menu will not be displayed:)
All right! With the database, the following is the php,javascript to the menu from the database read out, and displayed:)
1. JavaScript script: Function ShowMenu (MENUID)
{
if (menuid.style.display== "None")
{
Menuid.style.display= "";
}
Else
{
Menuid.style.display= "None";
}
}
This script is simple enough to respond to an event clicked on a menu.
2. css file:
TD {
font-family: "Verdana", "Song Body"; font-size:12px; line-height:130%; letter-spacing:1px
}
a:link {
Color: #990000; font-family: "Verdana", "Song Body"; font-size:12px; Text-decoration:none; letter-spacing:1px
}
a:visited {
Color: #990000; font-family: "Verdana", "Song Body"; font-size:12px; Text-decoration:none; letter-spacing:1px
}
a:active {
Color: #990000; font-family: "Verdana", "Song Body"; font-size:12px; Text-decoration:none; letter-spacing:1px
}
a:hover {
Color: #ff0000; font-family: "Verdana", "Song Body"; font-size:12px; Text-decoration:underline; letter-spacing:1px
}
. menu {
Color: #000000; font-family: "Verdana", "Song Body"; font-size:12px; Cursor:hand
}
Define some basic style information, such as font, color, super-connected style, etc., if you want to change the style, just modify here!
3, the following is my PHP page!
Basic variable Settings
$globals ["id"] = 1; The ID number used to track the drop-down menu
$layer = 1; Used to track the progression of the current menu
Connecting to a 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 then the Start menu is displayed
if (mysql_num_rows ($result) >0) Showtreemenu ($con, $result, $layer, $id);
//=============================================
Show Tree Menu function Showtreemenu ($con, $result, $layer)
$con: Database connection
$result: The set of menu records that need to be displayed
Layer: The series of menus that need to be displayed
//=============================================
function Showtreemenu ($con, $result, $layer)
{
Gets the number of items that need to be displayed for the menu
$numrows =mysql_num_rows ($result);
Start the Display menu, each submenu is represented by a table
echo "
";for ($rows =0; $rows < $numrows; $rows + +){Imports the contents of the current menu item into an array$menu =mysql_fetch_array ($result);Extracts a submenu recordset for a 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 the JavaScript onclick statement if (mysql_num_rows ($result _sub) >0) {echo]
| "; echo "
";
}
Else
{
echo " |
| "; echo "
";
}
If the menu item does not have a submenu and the hyperlink address is specified, it is specified as a super connection,
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 so that the onclick statement corresponds to echo "
"; echo "
| "; echo "
";
Add 1 to the series
$layer + +;
Recursively call the Showtreemenu () function to generate a submenu
Showtreemenu ($con, $result _sub, $layer);
Sub-menu processing complete, return to the previous level of recursion, reduce the progression by 1
$layer--;
echo " |
"; } Continue to display the next menu item} echo "
";
}
?>
In the above PHP page, I defined a function showtreemenu (), through the function of the call, will be recursively from the database to bring up each menu item, and displayed on the page:)
http://www.bkjia.com/PHPjc/364080.html www.bkjia.com true http://www.bkjia.com/PHPjc/364080.html techarticle Tree menu has a very wide range of applications in many desktop applications, the main advantage is that the structure is clear, so that users can very clearly know the location of their current. But on the web ...
