Detailed explanation of PHP+JS infinite scalable menu (easy to understand)_PHP tutorial
WBOY
Release： 2016-07-21 15:58:53
Original
957 people have browsed it
I’ve been posting basic stuff for a few days, and today I’m going to do something a little more difficult. The essence of the category management part that is generally used in the backend of a CMS system is the unlimited category menu. For novices, this may be difficult, but After listening to my detailed explanation today, I believe everyone will be able to do this stuff in the future. How to achieve it? Let’s make a database first: -- -- Table structure `cr_columninfo` --
These are test data. The basic principle is to establish data fields according to the tree structure. The core is that each column has its own ID number and the ID number of the parent column. Relying on these two Relationship, establish a tree structure, the top column parent ID = 0, this is easy to understand, now let’s describe the program execution principle. This program uses the most common recursive algorithm to traverse the submenus. First, first query all the top menus and display In a large table, each row displays a top-level menu, and then lists all submenus recursively. The submenu is located in the next row of the upper-level menu, and the display attribute of the row is not displayed. The row ID is dynamically generated by the program. No., combined with JS to control the display and hiding of rows, which is a scalable effect similar to Microsoft menus. There is a picture at the end of the article to help everyone understand. This is the final result of copying the HTML of the generated page into DW to just demonstrate the program. . Look at the code part. There is no difficult syntax. Please read it yourself with the help of comments. If you are interested, you can expand this code. The PHP code is as follows:
//Basic variable settings $GLOBALS["ID"] =1; //ID number used to track drop-down menus $layer =1; //The level used to track the current menu. //Connect to the database. $Con=mysql_connect("localhost","root","7529639"); ; mysql_query("SET NAMES 'GBK'"); //Extract the first-level menu $sql="select * from cr_columninfo where columnfatherid=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,$ID); //============================================== //Show tree menu function ShowTreeMenu($con,$result,$layer) //$con: database connection //$result: menu record set to be displayed //$layer: The level of the menu to be displayed //====================================== ======= 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 is represented by a table echo "
"; for($rows=0;$rows { //Extract the submenu record set of menu items $sql="select * from cr_columninfo where columnfatherid=$menu[columnid]"; $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 the menu item has no submenu, only the menu name is displayed echo $menu[columnname]; echo "
"; //If 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 "
< ;/td>"; " > ShowTreeMenu($Con,$result_sub,$layer); //Submenu processing is completed, return to the previous level of recursion echo "
"; } //Submenu processing is completed, return to the previous level of recursion, and reduce the series by 1 $layer--; } > } ?>
I’ve been posting basic stuff for a few days. Today I’m going to do something a little more difficult, which is usually used in the background of the CMS system. The essence of the category management part is reached - the unlimited category menu. For novices, this...
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
http: //www.bkjia.com/PHPjc/317503.html
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
