PHP creates infinite tree menu and three-level linkage menu-PHP Tutorial-php.cn

This article mainly introduces how to create infinite tree menus in PHP. It mainly uses recursive functions. Interested friends can refer to

Writing recursive functions. Consider caching and defining some static variables to store the results of the previous run. This 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 &#39;0&#39;,
`cate_Name` varchar(100) NOT NULL,
`cate_Intro` varchar(500) DEFAULT NULL,
`cate_Order` int(30) unsigned DEFAULT &#39;0&#39;,
`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, &#39;往事如风&#39;, &#39;记录往事&#39;, 0, &#39;icons/6.gif&#39;),
(5, 0, &#39;水煮三国&#39;, &#39;品位三国智慧&#39;, 0, &#39;icons/3.gif&#39;),
(2, 0, &#39;技术学习&#39;, &#39;平时学习的一些笔记，欢迎批评指正。&#39;, 0, &#39;icons/18.gif&#39;),
(3, 0, &#39;生活点滴&#39;, &#39;记录生活点滴&#39;, 0, &#39;icons/2.gif&#39;),
(6, 0, &#39;栀子花开&#39;, &#39;青春无限&#39;, 0, &#39;icons/8.gif&#39;),
(7, 0, &#39;假日休闲&#39;, &#39;悠闲、自在&#39;, 0, &#39;icons/24.gif&#39;),
(8, 2, &#39;html&#39;, &#39;html学习&#39;, 0, &#39;icons/1.gif&#39;),
(9, 2, &#39;css&#39;, &#39;css学习&#39;, 0, &#39;icons/1.gif&#39;),
(10, 2, &#39;php&#39;, &#39;php学习&#39;, 0, &#39;icons/18.gif&#39;),
(11, 10, &#39;php基础知识&#39;, &#39;php基础知识&#39;, 0, &#39;icons/1.gif&#39;),
(12, 10, &#39;oop&#39;, &#39;oop&#39;, 0, &#39;icons/1.gif&#39;),
(13, 10, &#39;php安全&#39;, &#39;讲述php安全&#39;, 0, &#39;icons/1.gif&#39;),
(14, 10, &#39;seagull framework&#39;, &#39;seagull framework&#39;, 0, &#39;icons/1.gif&#39;),
(15, 2, &#39;javascript&#39;, &#39;javascript学习&#39;, 0, &#39;icons/1.gif&#39;),
(16, 2, &#39;设计模式&#39;, NULL, 0, &#39;icons/1.gif&#39;),
(17, 2, &#39;软件工程&#39;, &#39;软件工程学习&#39;, 0, &#39;icons/1.gif&#39;),
(18, 3, &#39;厦门生活&#39;, &#39;厦门生活&#39;, 0, &#39;icons/8.gif&#39;),
(19, 3, &#39;大学生活&#39;, &#39;大学生活&#39;, 0, &#39;icons/8.gif&#39;),
(20, 3, &#39;童年生活&#39;, &#39;童年生活&#39;, 0, &#39;icons/15.gif&#39;),
(21, 19, &#39;学习&#39;, &#39;学习&#39;, 0, &#39;icons/1.gif&#39;),
(22, 19, &#39;运动&#39;, &#39;运动&#39;, 0, &#39;icons/16.gif&#39;),
(23, 19, &#39;旅游&#39;, &#39;旅游&#39;, 0, &#39;icons/24.gif&#39;),
(24, 22, &#39;排球&#39;, &#39;排球&#39;, 0, &#39;icons/9.gif&#39;),
(25, 22, &#39;篮球&#39;, &#39;篮球&#39;, 0, &#39;icons/9.gif&#39;),
(26, 22, &#39;羽毛球&#39;, &#39;羽毛球&#39;, 0, &#39;icons/9.gif&#39;),
(27, 22, &#39;乒乓球&#39;, &#39;乒乓球&#39;, 0, &#39;icons/9.gif&#39;);

Copy after login

2. Get data from the database and put it into the array:

require_once &#39;./classes/MyDB.php&#39;;
$con = MyDB::singleton();
$sql = <<<SQL
 select * from bg_cate cate
SQL;
$data = $con->getAll($sql);
//print_r($data);

Copy after login

Database OperationI use the pear class library. 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
 )

Copy after login

3. Convert the data from the previous step into a tree-shaped array The code is as follows:

function getTree($data, $pId)
{
$tree = &#39;&#39;;
foreach($data as $k => $v)
{
 if($v[&#39;cate_ParentId&#39;] == $pId)
 { //父亲找到儿子
 $v[&#39;cate_ParentId&#39;] = getTree($data, $v[&#39;cate_Id&#39;]);
 $tree[] = $v;
 //unset($data[$k]);
 }
}
return $tree;
}
$tree = getTree($data, 0);

Copy after login

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
  )

Copy after login

4. Convert the tree array to html code as follows:

function procHtml($tree)
{
$html = &#39;&#39;;
foreach($tree as $t)
{
 if($t[&#39;cate_ParentId&#39;] == &#39;&#39;)
 {
 $html .= "<li>{$t[&#39;cate_Name&#39;]}</li>";
 }
 else
 {
 $html .= "<li>".$t[&#39;cate_Name&#39;];
 $html .= procHtml($t[&#39;cate_ParentId&#39;]);
 $html = $html."</li>";
 }
}
return $html ? &#39;<ul>&#39;.$html.&#39;</ul>&#39; : $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>

Copy after login

5. You can also combine the codes in steps 3 and 4. The code is as follows:

function getTree($data, $pId)
{
$html = &#39;&#39;;
foreach($data as $k => $v)
{
 if($v[&#39;cate_ParentId&#39;] == $pId)
 { //父亲找到儿子
 $html .= "<li>".$v[&#39;cate_Name&#39;];
 $html .= getTree($data, $v[&#39;cate_Id&#39;]);
 $html = $html."</li>";
 }
}
return $html ? &#39;<ul>&#39;.$html.&#39;</ul>&#39; : $html ;
}
echo getTree($data, 0);

Copy after login

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 following is a three-level linkage menu made using php

Database structure

-- 表的结构 `bigclass` 
-- 
CREATE TABLE `bigclass` ( 
`bigclassid` int(11) NOT NULL auto_increment, 
`bigclassname` varchar(200) collate utf8_unicode_ci NOT NULL, 
`sort` int(11) NOT NULL, 
`suoshu` int(1) NOT NULL, 
PRIMARY KEY (`bigclassid`) 
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=19 ; 
-- 表的结构 `smallclass` 
-- 
CREATE TABLE `smallclass` ( 
`smallclassid` int(11) NOT NULL auto_increment, 
`smallclassname` varchar(200) collate utf8_unicode_ci NOT NULL, 
`bigclassid` int(11) NOT NULL, 
`sort` int(11) NOT NULL, 
PRIMARY KEY (`smallclassid`) 
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=7 ; 
-- 表的结构 `minclass` 
-- 
CREATE TABLE `minclass` ( 
`minclassid` int(10) NOT NULL auto_increment, 
`minclassname` varchar(200) NOT NULL, 
`bigclassid` int(10) NOT NULL, 
`smallclassid` int(10) NOT NULL, 
`sort` int(10) NOT NULL, 
PRIMARY KEY (`minclassid`) 
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

Copy after login

The code is as follows

<script language = "JavaScript"> 
var onecount; 
onecount=0; 
subcat = new Array(); 
<? 
//类别选择 
mysql_select_db($database_lr, $lr); 
$sql = "select * from smallclass order by sort"; 
$result = mysql_query( $sql ); 
$count = 0; 
while($res = mysql_fetch_row($result)){ 
?> 
subcat[<?=$count?>] = new Array("<?=$res[1]?>","<?=$res[4]?>","<?=$res[0]?>"); 
<? 
$count++; 
} 
?> 
onecount=<?php echo $count?> 
//联动函数 
function changelocation(bigclassid) 
{ 
document.myform.smallclassid.length = 0; 
var bigclassid=bigclassid; 
var i; 
document.myform.smallclassid.options[0] = new Option(&#39;请选择二级分类&#39;,&#39;&#39;); 
for (i=0;i < onecount; i++) 
{ 
if (subcat[i][1] == bigclassid) 
{ 
document.myform.smallclassid.options[document.myform.smallclassid.length] = new Option(subcat[i][0], subcat[i][2]); 
} 
} 
} 
</script> 
<?php 
mysql_select_db($database_lr, $lr); 
$sql2 = "select * from minclass order by sort"; 
$result2 = mysql_query( $sql2 ); 
$count2 = 0; 
?> 
<script language = "JavaScript"> 
//如果这个数组中含有双引号则不能使用。即二级和三级类不能含有双引号 
var onecount2; 
onecount2=0; 
subcat2 = new Array(); 
<?php 
$count2 = 0; 
while($res2 = mysql_fetch_row($result2)){ 
?> 
subcat2[<?php echo $count2?>] = new Array("<?php echo $res2[1]?>","<?php echo $res2[3]?>","<?php echo $res2[0]?>"); 
<?php 
$count2++; 
} 
?> 
onecount2=<?php echo $count2?>; 
function changelocation2(smallclassid) 
{ 
document.myform.minclassid.length = 0; 
var smallclassid=smallclassid; 
var j; 
document.myform.minclassid.options[0] = new Option(&#39;请选择三级分类&#39;,&#39;&#39;); 
for (j=0;j < onecount2; j++) 
{ 
if (subcat2[j][1] == smallclassid) 
{ 
document.myform.minclassid.options[document.myform.minclassid.length] = new Option(subcat2[j][0], subcat2[j][2]); 
} 
} 
} 
</script> 
<select name="bigclassid" onChange="changelocation(document.myform.bigclassid.options[document.myform.bigclassid.selectedIndex].value)" size="1"> 
<option selected value="">请指定一级分类</option> 
<? 
$sql = "select * from bigclass order by sort"; 
$result = mysql_query( $sql ); 
while($res = mysql_fetch_row($result)){ 
?> 
<option value="<? echo $res[0]; ?>"><? echo $res[1]?></option> 
<? } ?> 
</select> 
<select name="smallclassid" onChange="changelocation2(document.myform.smallclassid.options[document.myform.smallclassid.selectedIndex].value)" size="1"> 
<option selected value="">请指定二级分类</option> 
</select> 
<select name="minclassid" size="1"> 
<option selected value="">==所有三级分类==</option> 
</select>

Copy after login

The above is the detailed content of PHP creates infinite tree menu and three-level linkage menu. For more information, please follow other related articles on the PHP Chinese website!