Home > Article > Backend Development > Create unlimited tree menu with php
This article mainly introduces PHP to create infinite tree menus. It mainly uses recursive functions. Interested friends can refer to
Writing recursive functions. You can consider caching and defining some static functions. Variables are used to store the results of the previous run, which is very helpful for multi-program running efficiency.
The approximate steps are as follows:
step1:Get the data from the database and put it into an array,
step2:Convert the data into a tree-shaped array,
step3: Convert this tree-shaped array into html code.
You can also combine the second and third steps into one step.
Details are as follows:
1. Database design:
CREATE TABLE `bg_cate` ( `cate_Id` int(30) unsigned NOT NULL AUTO_INCREMENT, `cate_ParentId` int(30) unsigned DEFAULT '0', `cate_Name` varchar(100) NOT NULL, `cate_Intro` varchar(500) DEFAULT NULL, `cate_Order` int(30) unsigned DEFAULT '0', `cate_Icon` varchar(100) DEFAULT NULL, PRIMARY KEY (`cate_Id`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=34 ; -- -- 导出表中的数据 `bg_cate` -- INSERT INTO `bg_cate` (`cate_Id`, `cate_ParentId`, `cate_Name`, `cate_Intro`, `cate_Order`, `cate_Icon`) VALUES (4, 0, '往事如风', '记录往事', 0, 'icons/6.gif'), (5, 0, '水煮三国', '品位三国智慧', 0, 'icons/3.gif'), (2, 0, '技术学习', '平时学习的一些笔记,欢迎批评指正。', 0, 'icons/18.gif'), (3, 0, '生活点滴', '记录生活点滴', 0, 'icons/2.gif'), (6, 0, '栀子花开', '青春无限', 0, 'icons/8.gif'), (7, 0, '假日休闲', '悠闲、自在', 0, 'icons/24.gif'), (8, 2, 'html', 'html学习', 0, 'icons/1.gif'), (9, 2, 'css', 'css学习', 0, 'icons/1.gif'), (10, 2, 'php', 'php学习', 0, 'icons/18.gif'), (11, 10, 'php基础知识', 'php基础知识', 0, 'icons/1.gif'), (12, 10, 'oop', 'oop', 0, 'icons/1.gif'), (13, 10, 'php安全', '讲述php安全', 0, 'icons/1.gif'), (14, 10, 'seagull framework', 'seagull framework', 0, 'icons/1.gif'), (15, 2, 'javascript', 'javascript学习', 0, 'icons/1.gif'), (16, 2, '设计模式', NULL, 0, 'icons/1.gif'), (17, 2, '软件工程', '软件工程学习', 0, 'icons/1.gif'), (18, 3, '厦门生活', '厦门生活', 0, 'icons/8.gif'), (19, 3, '大学生活', '大学生活', 0, 'icons/8.gif'), (20, 3, '童年生活', '童年生活', 0, 'icons/15.gif'), (21, 19, '学习', '学习', 0, 'icons/1.gif'), (22, 19, '运动', '运动', 0, 'icons/16.gif'), (23, 19, '旅游', '旅游', 0, 'icons/24.gif'), (24, 22, '排球', '排球', 0, 'icons/9.gif'), (25, 22, '篮球', '篮球', 0, 'icons/9.gif'), (26, 22, '羽毛球', '羽毛球', 0, 'icons/9.gif'), (27, 22, '乒乓球', '乒乓球', 0, 'icons/9.gif');
2. Go to the database to retrieve Put the data into the array:
require_once './classes/MyDB.php'; $con = MyDB::singleton(); $sql = <<<SQL select * from bg_cate cate SQL; $data = $con->getAll($sql); //print_r($data);
I use the pear class library for database operations. The final data format of $data is as follows:
Array ( [0] => Array ( [cate_Id] => 4 [cate_ParentId] => 0 [cate_Name] => 往事如风 [cate_Intro] => 记录往事 [cate_Order] => 0 [cate_Icon] => icons/6.gif ) [1] => Array ( [cate_Id] => 5 [cate_ParentId] => 0 [cate_Name] => 水煮三国 [cate_Intro] => 品位三国智慧 [cate_Order] => 0 [cate_Icon] => icons/3.gif )
3. The code to convert the data in the previous step into a tree-shaped array is as follows:
function getTree($data, $pId) { $tree = ''; foreach($data as $k => $v) { if($v['cate_ParentId'] == $pId) { //父亲找到儿子 $v['cate_ParentId'] = getTree($data, $v['cate_Id']); $tree[] = $v; //unset($data[$k]); } } return $tree; } $tree = getTree($data, 0);
The final output data format of $tree is:
Array ( [0] => Array ( [cate_Id] => 4 [cate_ParentId] => [cate_Name] => 往事如风 [cate_Intro] => 记录往事 [cate_Order] => 0 [cate_Icon] => icons/6.gif ) [1] => Array ( [cate_Id] => 5 [cate_ParentId] => [cate_Name] => 水煮三国 [cate_Intro] => 品位三国智慧 [cate_Order] => 0 [cate_Icon] => icons/3.gif ) [2] => Array ( [cate_Id] => 2 [cate_ParentId] => Array ( [0] => Array ( [cate_Id] => 8 [cate_ParentId] => [cate_Name] => html [cate_Intro] => html学习 [cate_Order] => 0 [cate_Icon] => icons/1.gif )
4. Convert the tree-shaped array to html code as follows:
function procHtml($tree) { $html = ''; foreach($tree as $t) { if($t['cate_ParentId'] == '') { $html .= "<li>{$t['cate_Name']}</li>"; } else { $html .= "<li>".$t['cate_Name']; $html .= procHtml($t['cate_ParentId']); $html = $html."</li>"; } } return $html ? '<ul>'.$html.'</ul>' : $html ; } echo procHtml($tree); 输出的html的代码格式为: <ul> <li>往事如风</li> <li>水煮三国</li> <li>技术学习 <ul> <li>html</li> <li>css</li> <li>php <ul> <li>php基础知识</li> <li>oop</li> <li>php安全</li>
5. You can also convert the 3rd and The code in step 4 is put together, the code is as follows:
function getTree($data, $pId) { $html = ''; foreach($data as $k => $v) { if($v['cate_ParentId'] == $pId) { //父亲找到儿子 $html .= "<li>".$v['cate_Name']; $html .= getTree($data, $v['cate_Id']); $html = $html."</li>"; } } return $html ? '<ul>'.$html.'</ul>' : $html ; } echo getTree($data, 0);
6. Finally, add some css style, the effect is as follows:
The whole process is very clear and very suitable for friends who are creating an infinite tree for the first time. I hope everyone can gain something.
The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!
Related recommendations:
Principles and implementation of image recognition technology in PHP
PHP uses get to obtain url Chinese characters, resulting in garbled characters Solution
The above is the detailed content of Create unlimited tree menu with php. For more information, please follow other related articles on the PHP Chinese website!