PHP + JS unlimited scalable menu details (easy to understand) _ PHP Tutorial

PHP + JS unlimited scalable menu details (easy to understand ). After a few days of basic things, it is a little difficult today. Generally, the category management section is used in the background of the CMS system-the unlimited classification menu. for beginners, this is a few days of basic things. today it is a little difficult. generally, it is the essence of category management, which is used in the background of the CMS system-the unlimited classification menu. for beginners, this may be difficult, but today I have listened to it in detail, and I believe everyone will be able to make it happen in the future. How can this problem be achieved? Let's make a database first:
--
-- Table structure 'cr _ columninfo'
--

The code is as follows:

Create table 'cr _ columninfo '(
'Columnid' int (4) not null auto_increment,
'Columnfatherid' int (4) not null default '0 ',
'Columnname' varchar (100) not null default '',
'Columnadder' varchar (50) not null default '',
'Columninputdate' date not null default '2017-00-00 ',
Primary key ('columnid ')
) ENGINE = MyISAM AUTO_INCREMENT = 15 default charset = utf8 AUTO_INCREMENT = 15;
-- Export the table data 'cr _ columninfo'
--
Insert into 'cr _ columninfo '('columnid', 'columnfatherid', 'columnname', 'columnadder', 'columninputdate') VALUES (1, 0, 'audio and video start ', 'leeihui', '2017-09-28 '),
(2, 0, 'Campus style', 'leehui1983 ', '2017-09-28 '),
(3, 1, 'Hong Kong and Taiwan stars', 'leeihui', '2017-09-28 '),
(4, 0, 'landscape image', 'leehui1983 ', '2017-09-29 '),
(5, 4, 'vast Sea ', 'leehui1983', '2017-09-29 '),
(6, 5, 'Fuzhou Hai', 'leehui1983 ', '2017-09-29 '),
(7, 2, 'Graduation image', 'leeihui', '2017-09-29 '),
(9, 0, 'Sports start', 'leehui1983 ', '2017-10-02 '),
(10, 0, 'exquisite wallpaper ', 'leehui1983', '2017-10-02 '),
(11, 0, 'City scenery ', 'leehui1983', '2017-10-02 '),
(12, 0, 'Cartoon animate', 'leei1983 ', '2017-10-02 '),
(13, 0, 'game', 'leei1983 ', '2017-10-02 '),
(14, 0, 'author album ', 'leehui1983', '2017-10-02 ');

These are test data. The basic principle is to establish data fields according to the tree structure. The core is that the column has its own ID number and the ID number of its parent column. Based on these two relationships, the tree structure is established, parent ID = 0 in the top-level topic. This article describes the program execution principle. This program uses the most common recursive algorithm to traverse sub-menus. first, first, all top-level menus are displayed in a big table. no top-level menus are displayed in one row. then, all sub-menus are recursively listed. the sub-menus are located in the next row of the top-level menu, the row Display attribute is not displayed. the row ID dynamically generated by the program is combined with the display and hiding of JS control lines, which is similar to the scalable effect of Microsoft menu, at the end of the article, there is a graph to help you understand. this is to copy the HTML of the generated page into DW to demonstrate the final result of the program.
There is no obscure syntax to look at the code. please read it with comments and be interested in extending the code.
The PHP code is as follows:

The code is as follows:

Category directory tree