PHP+JS无限级可伸缩菜单详解（简单易懂）

2018-09-07 13:31

阅读：283

　　发了几天基础的东西，今天来点稍微难的，一般在CMS系统后台中都要用到的类别管理部分的精华－－无限级分类菜单，对于新手来说，这个可能有一定难度，但是今天听完我细细道来，相信以后大家就都会弄这东东了。怎么实现呢？大家先做个数据库出来先：
--
--表的结构`cr_columninfo`
--
复制代码代码如下:CREATETABLE`cr_columninfo`(
`columnid`int(4)NOTNULLauto_increment,
`columnfatherid`int(4)NOTNULLdefault0,
`columnname`varchar(100)NOTNULLdefault,
`columnadder`varchar(50)NOTNULLdefault,
`columninputdate`dateNOTNULLdefault0000-00-00,
PRIMARYKEY(`columnid`)
)ENGINE=MyISAMAUTO_INCREMENT=15DEFAULTCHARSET=utf8AUTO_INCREMENT=15;
--导出表中的数据`cr_columninfo`
--
INSERTINTO`cr_columninfo`(`columnid`,`columnfatherid`,`columnname`,`columnadder`,`columninputdate`)VALUES(1,0,影音明星,leehui,2006-09-28),
(2,0,校园风情,leehui1983,2006-09-28),
(3,1,港台明星,leehui,2006-09-28),
(4,0,风景图片,leehui1983,2006-09-29),
(5,4,浩瀚大海,leehui1983,2006-09-29),
(6,5,福州的海,leehui1983,2006-09-29),
(7,2,毕业图片,leehui,2006-09-29),
(9,0,体育明星,leehui1983,2006-10-02),
(10,0,精美壁纸,leehui1983,2006-10-02),
(11,0,城市风光,leehui1983,2006-10-02),
(12,0,卡通动漫,leehui1983,2006-10-02),
(13,0,游戏截图,leehui1983,2006-10-02),
(14,0,作者相册,leehui1983,2006-10-02);
这些是测试数据，基本原理就是按照树型结构建立数据字段，核心就是栏目都有本身的ID号和父栏目的ID号，依靠这两个关系，建立树型结构，顶级栏目父ID＝0，这个都好理解，现在来叙述下程序执行原理，本程序采用最为普遍的递归算法来遍历子菜单，首先，先查询出所有顶级菜单，显示在一个大表格里，没一行显示一个顶级菜单，再通过递归列出所有子菜单，子菜单处在上级菜单的所在行的下一行，且行的显示属性为不显示，通过程序动态生成的行ID号，结合JS控制行的显示与隐藏，也就是类似于微软菜单的可伸缩效果，文章最后有张图有助于大家理解，这是把生成页面的HTML复制进DW来只管演示程序的最终结果。
来看代码部分，并没有难懂的语法，请大家借助注释自己阅读，有兴趣可扩展此代码。
PHP代码如下:
复制代码代码如下:<html>
<head>
<metahttp-equiv=Content-Typec/>
<title>类别目录树</title>
<scripttype=text/javascript>
functionShowMenu(MenuID)
{
if(MenuID.style.display==none){
MenuID.style.display=;
}
else{
MenuID.style.display=none;
}
}
</script>
<linkhref=style.cssrel=stylesheettype=text/css>
</head>
<bodytopmargin=0bgcolor=#EFEFE7>
<tablewidth=100%height=25border=0cellpadding=0cellspacing=0bgcolor=#739E18>
<tr>
<tdalign=left><strong>栏目树形结构列表</strong></td>
</tr>
</table>
<?php
//基本变量设置
$GLOBALS[ID]=1;//用来跟踪下拉菜单的ID号
$layer=1;//用来跟踪当前菜单的级数
//连接数据库
$Con=mysql_connect(localhost,root,7529639);
mysql_select_db(cr_download);
mysql_query(SETNAMESGBK);
//提取一级菜单
$sql=select*fromcr_columninfowherecolumnfatherid=0;
$result=mysql_query($sql,$Con);
//如果一级菜单存在则开始菜单的显示
if(mysql_num_rows($result)>0)ShowTreeMenu($Con,$result,$ID);
//=============================================
//显示树型菜单函数ShowTreeMenu($con,$result,$layer)
//$con：数据库连接
//$result：需要显示的菜单记录集
//$layer：需要显示的菜单的级数
//=============================================
functionShowTreeMenu($Con,$result,$layer)
{
//取得需要显示的菜单的项目数
$numrows=mysql_num_rows($result);
//开始显示菜单，每个子菜单都用一个表格来表示
echo<tablecellpadding=0cellspacing=0border=0width=100%>;
for($rows=0;$rows<$numrows;$rows++)
{
//将当前菜单项目的内容导入数组
$menu=mysql_fetch_array($result);
//提取菜单项目的子菜单记录集
$sql=select*fromcr_columninfowherecolumnfatherid=$menu[columnid];
$result_sub=mysql_query($sql,$Con);
echo<tr>;
//如果该菜单项目有子菜单，则添加JavaScriptonClick语句
if(mysql_num_rows($result_sub)>0)
{
echo<tdwidth=20><imgsrc=./images/plus.pngborder=0></td>;
echo<tdclass=Menu>;
}
else{
echo<tdwidth=20><imgsrc=./images/page.pngborder=0></td>;
echo<tdclass=Menu>;
}
//如果该菜单项目没有子菜单，只显示菜单名称
echo$menu[columnname];
echo</td></tr>;
//如果该菜单项目有子菜单，则显示子菜单
if(mysql_num_rows($result_sub)>0)
{
//指定该子菜单的ID和style，以便和onClick语句相对应
echo<trid=Menu.$GLOBALS[ID]++.style=display:none>;
echo<tdwidth=20></td>;
echo<td>;
//将级数加1
$layer++;
//递归调用ShowTreeMenu()函数，生成子菜单
ShowTreeMenu($Con,$result_sub,$layer);
//子菜单处理完成，返回到递归的上一层
echo</td></tr>;
}
//子菜单处理完成，返回到递归的上一层，将级数减1
$layer--;
}
echo</table>;
}
?>
</body>
</html>
最后贴上效果图和源代码打包，希望本文对大家有所帮助^_^
下载此文件