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 相关文章推荐
数据库相关问题
Oct 09 PHP
php function用法如何递归及return和echo区别
Mar 07 PHP
PHP小教程之实现链表
Jun 09 PHP
php实现CSV文件导入和导出
Oct 24 PHP
PHP微信开发之模板消息回复
Jun 24 PHP
PHP获取表单数据与HTML嵌入PHP脚本的实现
Feb 09 PHP
PHP框架laravel的.env文件配置教程
Jun 07 PHP
PHP不使用内置函数实现字符串转整型的方法示例
Jul 03 PHP
layui框架实现文件上传及TP3.2.3(thinkPHP)对上传文件进行后台处理操作示例
May 12 PHP
php实现的数组转xml案例分析
Sep 28 PHP
laravel框架之数据库查出来的对象实现转化为数组
Oct 23 PHP
TP3.2.3框架使用CKeditor编辑器在页面中上传图片的方法分析
Dec 31 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
mysql 全文搜索 技巧
2007/04/27 PHP
强烈声明: 不要使用(include/require)_once
2013/06/06 PHP
php使用curl简单抓取远程url的方法
2015/03/13 PHP
学习php设计模式 php实现享元模式(flyweight)
2015/12/07 PHP
PHP中关于php.ini参数优化详解
2020/02/28 PHP
js对数字的格式化使用说明
2011/01/12 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
2014/04/08 Javascript
jquery中animate的stop()方法作用实例分析
2015/01/30 Javascript
javascript如何写热点图
2015/12/08 Javascript
javascript基于prototype实现类似OOP继承的方法
2015/12/16 Javascript
用JS生成UUID的方法实例
2016/03/30 Javascript
jQuery实现简单倒计时功能的方法
2016/07/04 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
2016/11/22 Javascript
JQuery ZTree使用方法详解
2017/01/07 Javascript
原生JavaScript实现Tooltip浮动提示框特效
2017/03/07 Javascript
vue router2.0二级路由的简单使用
2017/07/05 Javascript
利用ES6实现单例模式及其应用详解
2017/12/09 Javascript
jQuery动态移除与增加onclick属性的方法详解
2018/06/07 jQuery
python处理cookie详解
2014/02/07 Python
python实现计算倒数的方法
2015/07/11 Python
python3 实现的人人影视网站自动签到
2016/06/19 Python
Python面向对象基础入门之编码细节与注意事项
2018/12/11 Python
Pycharm之快速定位到某行快捷键的方法
2019/01/20 Python
linux下python中文乱码解决方案详解
2019/08/28 Python
python+rsync精确同步指定格式文件
2019/08/29 Python
python numpy数组中的复制知识解析
2020/02/03 Python
用python制作个音乐下载器
2021/01/30 Python
CSS3 制作旋转的大风车(充满童年回忆)
2013/01/30 HTML / CSS
分享CSS3制作卡片式图片的方法
2016/07/08 HTML / CSS
加拿大购物频道:The Shopping Channel
2016/07/21 全球购物
June Jacobs尊积帕官网:知名的spa水疗护肤品牌
2019/03/21 全球购物
Stutterheim瑞典:瑞典高级外套时装品牌
2019/06/24 全球购物
党性教育心得体会
2014/09/03 职场文书
2016年党员公开承诺书范文
2016/03/24 职场文书
windows11怎么查看自己安装的版本号? win11版本号的查看方法
2021/11/21 数码科技
Redis特殊数据类型Geospatial地理空间
2022/06/01 Redis