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


Posted in PHP onJanuary 02, 2007

发了几天基础的东西,今天来点稍微难的,一般在CMS系统后台中都要用到的类别管理部分的精华--无限级分类菜单,对于新手来说,这个可能有一定难度,但是今天听完我细细道来,相信以后大家就都会弄这东东了。怎么实现呢?大家先做个数据库出来先:
-- 
-- 表的结构 `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');

这些是测试数据,基本原理就是按照树型结构建立数据字段,核心就是栏目都有本身的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>

最后贴上效果图和源代码打包,希望本文对大家有所帮助^_^
PHP+JS无限级可伸缩菜单详解(简单易懂)下载此文件 
PHP 相关文章推荐
如何在PHP中使用Oracle数据库(3)
Oct 09 PHP
php上传apk后自动提取apk包信息的使用(示例下载)
Apr 26 PHP
解析thinkphp中的导入文件标签
Jun 20 PHP
Codeigniter注册登录代码示例
Jun 12 PHP
php+ajax实现图片文件上传功能实例
Jun 17 PHP
PHP中读取文件的几个方法总结(推荐)
Jun 03 PHP
php rmdir使用递归函数删除非空目录实例详解
Oct 20 PHP
基于win2003虚拟机中apache服务器的访问
Aug 01 PHP
PHP单例模式与工厂模式详解
Aug 29 PHP
PHP中md5()函数的用法讲解
Mar 30 PHP
什么是PHP7中的孤儿进程与僵尸进程
Apr 14 PHP
PHP上传图片到数据库并显示的实例代码
Dec 20 PHP
PHP文件上传实例详解!!!
Jan 02 #PHP
AJAX for PHP简单表数据查询实例
Jan 02 #PHP
[原创]PHP中通过ADODB库实现调用Access数据库之修正版本
Dec 31 #PHP
PHP中通过ADO调用Access数据库的方法测试不通过
Dec 31 #PHP
刚才在简化php的库,结果发现很多东西
Dec 31 #PHP
smarty+adodb+部分自定义类的php开发模式
Dec 31 #PHP
adodb与adodb_lite之比较
Dec 31 #PHP
You might like
FCKeditor的安装(PHP)
2007/01/13 PHP
PHP设计模式之代理模式的深入解析
2013/06/13 PHP
php compact 通过变量创建数组
2016/11/15 PHP
php编程实现简单的网页版计算器功能示例
2017/04/26 PHP
[HTML/CSS/Javascript]WWTJS
2007/09/25 Javascript
jQuery 技巧大全(新手入门篇)
2009/05/12 Javascript
基于JQuery的多标签实现代码
2012/09/19 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/20 Javascript
js中跨域方法原理详解
2015/07/19 Javascript
javascript正则表达式中分组详解
2016/07/17 Javascript
JavaScript面向对象分层思维全面解析
2016/11/22 Javascript
基于jQuery实现图片推拉门动画效果的两种方法
2017/08/26 jQuery
基于jQuery实现无缝轮播与左右点击效果
2018/05/13 jQuery
基于elementUI竖向表格、和并列的案例
2020/10/26 Javascript
JS数组索引检测中的数据类型问题详解
2021/01/11 Javascript
[01:17]炒鸡美酒第四天TA暴走
2018/06/05 DOTA
Python进程间通信用法实例
2015/06/04 Python
Python语言实现获取主机名根据端口杀死进程
2016/03/31 Python
深入理解python中的浅拷贝和深拷贝
2016/05/30 Python
详解Python各大聊天系统的屏蔽脏话功能原理
2016/12/01 Python
python利用itertools生成密码字典并多线程撞库破解rar密码
2019/08/12 Python
python实现静态web服务器
2019/09/03 Python
python实现修改固定模式的字符串内容操作示例
2019/12/30 Python
python 下划线的不同用法
2020/10/24 Python
用CSS3实现Win8风格的方格导航菜单效果
2013/04/10 HTML / CSS
如何利用cmp命令比较文件
2016/04/11 面试题
优秀员工自荐信范文
2013/10/05 职场文书
食品科学与工程专业毕业生求职信范文
2014/07/21 职场文书
教师党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
2014年政府采购工作总结
2014/12/09 职场文书
2015年实习生工作总结报告
2015/04/28 职场文书
幼儿园开学家长寄语(2016秋季)
2015/12/03 职场文书
公司开业的祝贺语大全(60条)
2019/07/05 职场文书
导游词之宁夏贺兰山岩画
2019/11/08 职场文书
Python 解决空列表.append() 输出为None的问题
2021/05/23 Python
高考要来啦!用Python爬取历年高考数据并分析
2021/06/03 Python