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 相关文章推荐
mayfish 数据入库验证代码
Apr 30 PHP
ThinkPHP模板IF标签用法详解
Jul 01 PHP
PHP函数eval()介绍和使用示例
Aug 20 PHP
基于递归实现的php树形菜单代码
Nov 19 PHP
PHP实现简单数字分页效果
Jul 26 PHP
利用PHP fsockopen 模拟POST/GET传送数据的方法
Sep 22 PHP
PHP时间戳格式全部汇总 (获取时间、时间戳)
Jun 13 PHP
PHP实现mysqli批量执行多条语句的方法示例
Jul 22 PHP
php语言注释,单行注释和多行注释
Jan 21 PHP
PHP实现的XXTEA加密解密算法示例
Aug 28 PHP
php中文语义分析实现方法示例
Sep 28 PHP
Laravel5.1 框架Request请求操作常见用法实例分析
Jan 04 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提取视频网站页面中的FLASH地址的代码
2010/04/17 PHP
PHP header函数分析详解
2011/08/06 PHP
js+php实现静态页面实时调用用户登陆状态的方法
2015/01/04 PHP
php实现判断访问来路是否为搜索引擎机器人的方法
2015/04/15 PHP
PHP中FTP相关函数小结
2016/07/15 PHP
php表单习惯用的正则表达式
2017/10/11 PHP
Yii2框架自定义类统一处理url操作示例
2019/05/25 PHP
23个超流行的jQuery相册插件整理分享
2011/04/25 Javascript
JS实现随机数生成算法示例代码
2013/08/08 Javascript
jQuery插件datepicker 日期连续选择
2015/06/12 Javascript
JavaScript如何自定义trim方法
2015/07/28 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
2015/10/10 Javascript
jQuery插件formValidator自定义函数扩展功能实例详解
2015/11/25 Javascript
前端程序员必须知道的高性能Javascript知识
2016/08/24 Javascript
JS请求servlet功能示例
2017/06/01 Javascript
JS实现根据指定值删除数组中的元素操作示例
2018/08/02 Javascript
解决VUEX的mapState/...mapState等取值问题
2020/07/24 Javascript
React实现轮播效果
2020/08/25 Javascript
[09:59]DOTA2-DPC中国联赛2月7日Recap集锦
2021/03/11 DOTA
python使用rabbitmq实现网络爬虫示例
2014/02/20 Python
使用python采集脚本之家电子书资源并自动下载到本地的实例脚本
2018/10/23 Python
selenium获取当前页面的url、源码、title的方法
2019/06/12 Python
PyQT5 QTableView显示绑定数据的实例详解
2019/06/25 Python
windows+vscode安装paddleOCR运行环境的步骤
2020/11/11 Python
探究 canvas 绘图中撤销(undo)功能的实现方式详解
2018/05/17 HTML / CSS
凌阳科技股份有限公司C++程序员面试题笔试题
2014/11/20 面试题
求职简历自荐信
2013/10/20 职场文书
《秋姑娘的信》教学反思
2014/02/28 职场文书
教师节感恩老师演讲稿
2014/08/28 职场文书
2014年办公室文秘工作总结
2014/12/09 职场文书
2015年感恩节演讲稿(优选篇)
2015/03/20 职场文书
总账会计岗位职责
2015/04/02 职场文书
2015年社区消防安全工作总结
2015/10/14 职场文书
2016年大学校运会广播稿件
2015/12/21 职场文书
Nginx禁止ip访问或非法域名访问
2022/04/07 Servers
vue实现可以快进后退的跑马灯组件
2022/04/08 Vue.js