Tree type menu implemented using "Function Recursive"
Source of: simon.qiu Popularity: 11847
The tree menu has a very wide application in many desktop applications. Its main advantage is clear structure, which is good to know that the user is very clear. But in the web, the application can be used directly because there is no ideal ready-to-range component, so in general, the programmer is mainly through JavaScript to implement some simple tree structure menus, but these menus are often prior. Set the hierarchical relationship between menu items, and the hierarchical relationships between menu items, which is not conducive to the expansion. Once another menu structure is needed, it is often necessary to rewrite, so it is not very convenient to use. After research on the function, I found that this tree menu can make dynamic changes in the display of the tree menu by recursive functions, and there is no limitation of the grade.
Here is the processing code for a dynamic tree menu I wrote by PHP, MySQL, JavaScript. If everyone is interested, let's take a look at how I implemented it :) First, we need a database, in this In the database, we built 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)); This table is used to index Parent_ID to save the ID number of the previous menu. If it is a first-level menu, 0 name is the name of the menu, that is, the menu content that is displayed on the page, if a menu is The final menu, you need to specify the URL address of the connection. This field is used to save this address, the other non-end menu, this field is air, the database is available, you can add some records, below When I do test, some records used: INSERT INTO MENU VALUES ("1", "0", "Personnel Management", "" "Insert Into Menu Values (" 2 "," 0 "," Communication Exchange " , ""); 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 "," Network Conference ", ""); INSERT INTO MENU VALUES ("7", "3", "New Archives", "Http://localhost/personal/add_chive.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", "held a meeting "," http://localhosting.php "); Insert INTO MENU VALUES (" 14 "," 6 "," Conference Query "," http://localhost/communication/search_meeting.ph "); When adding a record, be careful, the Parent_ID of the Non-Level Menu must be specified as the ID number of the upper-level menu, otherwise your menu will not display :) Ok! With a database, the following is to read the menu from the database by PHP, JavaScript :) 1, javascript script: function showmenu (menuid) {if (Menuid.Style.Display == "none") {Menuid .style.display = "";} else {menuid.style.display = "none";}} This script is simple, which is used to click on a menu by clicking.
2, CSS file: TD {font-family: "Verdana", "Song"; Font-size: 12px; line-height: 130%; letter-spacing: 1px} A: Link {color: # 990000; font-family : "Verdana", "Song"; font-size: 12px; text-decoration: none; letter-spacing: 1px} A: visited {color: # 990000; font-family: "Verdana", "Song"; font- Size: 12px; Text-Decoration: None; letter-spacing: 1px} A: Active {color: # 990000; font-family: "Verdana", "Song"; Font-size: 12px; Text-Decoration: none; letter -spacing: 1px} A: Hover {Color: # ff0000; Font-Family: "Verdana", "Song"; font-size: 12px; text-decoration: underline; letter-spacing: 1px} .Menu {Color: # 000000; Font-Family: "Verdana", "Song"; Font-size: 12px; Cursor: Hand} Defines some basic style information, such as font, color, super connection style, etc. If you want to change the style, Just modify here! 3, below is my PHP page! // Basic Variable Setting $ GLOBALS ["ID"] = 1; // Used to track the ID number of the drop-down menu = 1; // Used to track the number // connected to the current menu // Connect $ con = mysql_connect (" Localhost "," root "," "); mysql_select_db (" work "); // Extract the first-level menu $ sql =" Select * from menu where parent_id = 0 "; $ results = mysql_query ($ SQL, $ Con); // If the first-level menu exists, the start menu is displayed if (mysql_num_rows ($ result)> 0) ShowtreeMenu ($ Con, $ Result, $ Layer, $ ID); / / =========== =========================================== = // Show Tree Menu Function ShowtreeMenu ($ Con, $ Result, $ Result, $ Layer // $ con: Database connection // $ result: Menu Record Set // Layer: The number of menus that need to be displayed // ========================================================================================================================================================================================================== =========
