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概述.
Oct 09 PHP
用PHP控制用户的浏览器--ob*函数的使用说明
Mar 16 PHP
window+nginx+php环境配置 附配置搭配说明
Dec 29 PHP
SWFUpload与CI不能正确上传识别文件MIME类型解决方法分享
Apr 18 PHP
PHP判断指定时间段的2个方法
Mar 14 PHP
php中switch与ifelse的效率区别及适用情况分析
Feb 12 PHP
php发送短信验证码完成注册功能
Nov 24 PHP
php打乱数组二维数组多维数组的简单实例
Jun 17 PHP
php操纵mysqli数据库的实现方法
Sep 18 PHP
php PDO异常处理详解
Nov 20 PHP
Yii框架弹出框功能示例
Jan 07 PHP
PHP四种排序算法实现及效率分析【冒泡排序,插入排序,选择排序和快速排序】
Apr 27 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
php目录管理函数小结
2008/09/10 PHP
php 5.6版本中编写一个PHP扩展的简单示例
2015/01/20 PHP
PHP类的特性实例分析
2016/09/28 PHP
详解Yii2 rules 的验证规则
2016/12/02 PHP
PHP关键特性之命名空间实例详解
2017/05/06 PHP
动态为事件添加js代码示例
2009/02/15 Javascript
js 在定义的时候立即执行的函数表达式(function)写法
2013/01/16 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
2013/10/22 Javascript
escape函数解决js中ajax传递中文出现乱码问题
2014/10/30 Javascript
Javascript中的几种URL编码方法比较
2015/01/23 Javascript
js实现目录链接,内容跟着目录滚动显示的简单实例
2016/10/15 Javascript
layui 给数据表格加序号的方法
2018/08/20 Javascript
JS中作用域以及变量范围分析
2020/07/18 Javascript
nodejs+express最简易的连接数据库的方法
2020/12/23 NodeJs
[05:10]2014DOTA2国际邀请赛 通往胜利之匙赛场探秘之旅
2014/07/18 DOTA
python中sleep函数用法实例分析
2015/04/29 Python
Python多线程扫描端口代码示例
2018/02/09 Python
关于Python正则表达式 findall函数问题详解
2018/03/22 Python
Python使用win32com模块实现数据库表结构自动生成word表格的方法
2018/07/17 Python
selenium+python自动化测试之环境搭建
2019/01/23 Python
python实现UDP协议下的文件传输
2020/03/20 Python
pandas数据拼接的实现示例
2020/04/16 Python
Python+kivy BoxLayout布局示例代码详解
2020/12/28 Python
详解css3自定义滚动条样式写法
2017/12/25 HTML / CSS
HTML5 微格式和相关的属性名称
2010/02/10 HTML / CSS
应届专科生个人的自我评价
2014/01/05 职场文书
渔夫的故事教学反思
2014/02/14 职场文书
英语老师推荐信
2014/02/26 职场文书
团结就是力量演讲稿
2014/05/21 职场文书
美化环境标语
2014/06/20 职场文书
企业财务经理岗位职责
2015/04/08 职场文书
结婚当天新郎保证书
2015/05/08 职场文书
MongoDB balancer的使用详解
2021/04/30 MongoDB
教你修复 Win11应用商店加载空白问题
2021/12/06 数码科技
Python循环之while无限迭代
2022/04/30 Python
JDK8中String的intern()方法实例详细解读
2022/09/23 Java/Android