PHP+JS无限级可伸缩菜单详解（简单易懂）
更新时间：2007年01月02日 00:00:00 作者：
发了几天基础的东西，今天来点稍微难的，一般在CMS系统后台中都要用到的类别管理部分的精华－－无限级分类菜单，对于新手来说，这个可能有一定难度，但是今天听完我细细道来，相信以后大家就都会弄这东东了。怎么实现呢？大家先做个数据库出来先：
--
-- 表的结构 `cr_columninfo`
--
这些是测试数据，基本原理就是按照树型结构建立数据字段，核心就是栏目都有本身的ID号和父栏目的ID号，依靠这两个关系，建立树型结构，顶级栏目父ID＝0，这个都好理解，现在来叙述下程序执行原理，本程序采用最为普遍的递归算法来遍历子菜单，首先，先查询出所有顶级菜单，显示在一个大表格里，没一行显示一个顶级菜单，再通过递归列出所有子菜单，子菜单处在上级菜单的所在行的下一行，且行的显示属性为不显示，通过程序动态生成的行ID号，结合JS控制行的显示与隐藏，也就是类似于微软菜单的可伸缩效果，文章最后有张图有助于大家理解，这是把生成页面的HTML复制进DW来只管演示程序的最终结果。
来看代码部分，并没有难懂的语法，请大家借助注释自己阅读，有兴趣可扩展此代码。
PHP代码如下:
最后贴上效果图和源代码打包，希望本文对大家有所帮助^_^
下载此文件
--
-- 表的结构 `cr_columninfo`
--
复制代码 代码如下:
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 '0000-00-00',
PRIMARY KEY (`columnid`)
) ENGINE=MyISAM AUTO_INCREMENT=15 DEFAULT CHARSET=utf8 AUTO_INCREMENT=15 ;
-- 导出表中的数据 `cr_columninfo`
--
INSERT INTO `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');
`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 '0000-00-00',
PRIMARY KEY (`columnid`)
) ENGINE=MyISAM AUTO_INCREMENT=15 DEFAULT CHARSET=utf8 AUTO_INCREMENT=15 ;
-- 导出表中的数据 `cr_columninfo`
--
INSERT INTO `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>
<meta http-equiv="Content-Type" c />
<title>类别目录树</title>
<script type="text/javascript">
function ShowMenu(MenuID)
{
if(MenuID.style.display=="none"){
MenuID.style.display="";
}
else{
MenuID.style.display="none";
}
}
</script>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body topmargin="0" bgcolor="#EFEFE7">
<table width="100%" height="25" border="0" cellpadding="0" cellspacing="0" bgcolor="#739E18">
<tr>
<td align="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("SET NAMES 'GBK'");
//提取一级菜单
$sql="select * from cr_columninfo where columnfatherid=0";
$result=mysql_query($sql,$Con);
//如果一级菜单存在则开始菜单的显示
if(mysql_num_rows($result)>0) ShowTreeMenu($Con,$result,$ID);
//=============================================
//显示树型菜单函数 ShowTreeMenu($con,$result,$layer)
//$con：数据库连接
//$result：需要显示的菜单记录集
//$layer：需要显示的菜单的级数
//=============================================
function ShowTreeMenu($Con,$result,$layer)
{
//取得需要显示的菜单的项目数
$numrows=mysql_num_rows($result);
//开始显示菜单，每个子菜单都用一个表格来表示
echo "<table cellpadding='0' cellspacing='0' border='0' width='100%'>";
for($rows=0;$rows<$numrows;$rows++)
{
//将当前菜单项目的内容导入数组
$menu=mysql_fetch_array($result);
//提取菜单项目的子菜单记录集
$sql="select * from cr_columninfo where columnfatherid=$menu[columnid]";
$result_sub=mysql_query($sql,$Con);
echo "<tr>";
//如果该菜单项目有子菜单，则添加JavaScript onClick语句
if(mysql_num_rows($result_sub)>0)
{
echo "<td width='20'><img src='./images/plus.png' border='0' > </td>";
echo "<td class='Menu' >";
}
else{
echo "<td width='20'><img src='./images/page.png' border='0'> </td>";
echo "<td class='Menu'>";
}
//如果该菜单项目没有子菜单，只显示菜单名称
echo $menu[columnname];
echo "</td></tr>";
//如果该菜单项目有子菜单，则显示子菜单
if(mysql_num_rows($result_sub)>0)
{
//指定该子菜单的ID和style，以便和onClick语句相对应
echo "<tr id=Menu".$GLOBALS["ID"]++." style='display:none'>";
echo "<td width='20'> </td>";
echo "<td>";
//将级数加1
$layer++;
//递归调用ShowTreeMenu()函数，生成子菜单
ShowTreeMenu($Con,$result_sub,$layer);
//子菜单处理完成，返回到递归的上一层
echo "</td></tr>";
}
//子菜单处理完成，返回到递归的上一层，将级数减1
$layer--;
}
echo "</table>";
}
?>
</body>
</html>
<head>
<meta http-equiv="Content-Type" c />
<title>类别目录树</title>
<script type="text/javascript">
function ShowMenu(MenuID)
{
if(MenuID.style.display=="none"){
MenuID.style.display="";
}
else{
MenuID.style.display="none";
}
}
</script>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body topmargin="0" bgcolor="#EFEFE7">
<table width="100%" height="25" border="0" cellpadding="0" cellspacing="0" bgcolor="#739E18">
<tr>
<td align="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("SET NAMES 'GBK'");
//提取一级菜单
$sql="select * from cr_columninfo where columnfatherid=0";
$result=mysql_query($sql,$Con);
//如果一级菜单存在则开始菜单的显示
if(mysql_num_rows($result)>0) ShowTreeMenu($Con,$result,$ID);
//=============================================
//显示树型菜单函数 ShowTreeMenu($con,$result,$layer)
//$con：数据库连接
//$result：需要显示的菜单记录集
//$layer：需要显示的菜单的级数
//=============================================
function ShowTreeMenu($Con,$result,$layer)
{
//取得需要显示的菜单的项目数
$numrows=mysql_num_rows($result);
//开始显示菜单，每个子菜单都用一个表格来表示
echo "<table cellpadding='0' cellspacing='0' border='0' width='100%'>";
for($rows=0;$rows<$numrows;$rows++)
{
//将当前菜单项目的内容导入数组
$menu=mysql_fetch_array($result);
//提取菜单项目的子菜单记录集
$sql="select * from cr_columninfo where columnfatherid=$menu[columnid]";
$result_sub=mysql_query($sql,$Con);
echo "<tr>";
//如果该菜单项目有子菜单，则添加JavaScript onClick语句
if(mysql_num_rows($result_sub)>0)
{
echo "<td width='20'><img src='./images/plus.png' border='0' > </td>";
echo "<td class='Menu' >";
}
else{
echo "<td width='20'><img src='./images/page.png' border='0'> </td>";
echo "<td class='Menu'>";
}
//如果该菜单项目没有子菜单，只显示菜单名称
echo $menu[columnname];
echo "</td></tr>";
//如果该菜单项目有子菜单，则显示子菜单
if(mysql_num_rows($result_sub)>0)
{
//指定该子菜单的ID和style，以便和onClick语句相对应
echo "<tr id=Menu".$GLOBALS["ID"]++." style='display:none'>";
echo "<td width='20'> </td>";
echo "<td>";
//将级数加1
$layer++;
//递归调用ShowTreeMenu()函数，生成子菜单
ShowTreeMenu($Con,$result_sub,$layer);
//子菜单处理完成，返回到递归的上一层
echo "</td></tr>";
}
//子菜单处理完成，返回到递归的上一层，将级数减1
$layer--;
}
echo "</table>";
}
?>
</body>
</html>
最后贴上效果图和源代码打包，希望本文对大家有所帮助^_^
下载此文件
您可能感兴趣的文章:
- 基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
- jsTree 基于JQuery的排序节点 Bug
- jquery下jstree简单应用 - v1.0
- jquery.jstree 增加节点的双击事件代码
- 基于jsTree的无限级树JSON数据的转换代码
- JQery jstree 大数据量问题解决方法
- jsTree树控件(基于jQuery, 超强悍)[推荐]
- 关于无限分级(ASP+数据库+JS)的实现代码
- js实现无限级树形导航列表效果代码
- json+jQuery实现的无限级树形菜单效果代码
- javascript实现无限级select联动菜单
- 基于jquery的无限级联下拉框js插件
- js无限级折叠菜单精简版
- php 无限级数据JSON格式及JS解析
- jstree创建无限分级树的方法【基于ajax动态创建子节点】
相关文章
这篇文章主要介绍了YII Framework框架教程之国际化实现方法,较为详细的分析了YII Framework框架国际化的原理与相关实现技巧,需要的朋友可以参考下2016-03-03
这篇文章主要介绍了PHP中的reflection反射机制测试例子,从本文可以学到一些反射的使用方法,需要的朋友可以参考下2014-08-08
这篇文章主要介绍了php去除换行(回车换行)的三种方法,需要的朋友可以参考下2014-03-03
我们大家有知道PHP串行化可以把变量包括对象，转化成连续bytes数据，你可以将串行化后的变量存在一个文件里或在网络上传输，然后再反串行化还原为原来的数据。文章给大家介绍PHP对象的串行化与反串行化，感兴趣的朋友一起学习吧2016-01-01
本篇文章介绍了，使用php实现选择排序的解决方法。需要的朋友参考下2013-05-05
匹配csdn用户数据库与官方用户的重合度并将重叠部分的用户筛选出来
CSDN用户数据泄漏导致官方用户的安全受到了严重的威胁，故希望能把两个站的用户数据做个对比，把其中重叠部分的用户筛选出来，并通知相应用户及时修改密码，确保风险将至最低2011-12-12
这篇文章主要介绍了js代码实现微博导航栏的相关资料,需要的朋友可以参考下2015-07-07
这篇文章主要为大家详细介绍了ThinkPHP实现生成和校验验证码功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
php+mysql+ajax实现百度搜索下拉提示框 主要有3个文件三个文件在同一个目录里 如下图 下面是三个文件的代码 把sql文件导入到mysql数据库里 修改下数据库密码为自己的 记得哦是UTF-8编码2012-08-08
Win2003+apache+PHP+SqlServer2008 配置生产环境
因项目的特殊需要，需要用php链接sql2008数据库，为此，光这个环境问题就折磨了我好久，现在记录下来过程，分享给大家2014-07-07
最新评论