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+DBM的同学录程序(1)
Oct 09 PHP
php 在线打包_支持子目录
Jun 28 PHP
discuz论坛 用户登录 后台程序代码
Nov 27 PHP
PHP 截取字符串专题集合
Aug 19 PHP
约瑟夫环问题的PHP实现 使用PHP数组内部指针操作函数
Oct 12 PHP
php中将html中的br换行符转换为文本输入中的换行符
Mar 26 PHP
PHP中操作ini配置文件的方法
Apr 25 PHP
thinkphp的c方法使用示例
Feb 24 PHP
PHP 如何获取二维数组中某个key的集合
Jun 03 PHP
PHP配置把错误日志以邮件方式发送方法(Windows系统)
Jun 23 PHP
简单谈谈PHP面向对象之标识对象
Jun 27 PHP
PHP+Redis事务解决高并发下商品超卖问题(推荐)
Aug 03 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中ADODB类详解
2008/03/25 PHP
php 缩略图实现函数代码
2011/06/23 PHP
PHP版微信公众平台红包API
2015/04/02 PHP
是 WordPress 让 PHP 更流行了 而不是框架
2016/02/03 PHP
浅谈PHP中的
2016/04/23 PHP
PHP strcmp()和strcasecmp()的区别实例
2016/11/05 PHP
php使用parse_str实现查询字符串解析到变量中的方法
2017/02/17 PHP
Laravel框架查询构造器简单示例
2019/05/08 PHP
laravel异步监控定时调度器实例详解
2019/06/21 PHP
JS获得浏览器版本和操作系统版本的例子
2014/05/13 Javascript
在网页中插入百度地图的步骤详解
2016/12/02 Javascript
angular2+nodejs实现图片上传功能
2017/03/27 NodeJs
给vue项目添加ESLint的详细步骤
2017/09/29 Javascript
NW.js 简介与使用方法
2018/02/01 Javascript
vue-cli项目无法用本机IP访问的解决方法
2018/09/20 Javascript
Vue.js特性Scoped Slots的浅析
2019/02/20 Javascript
Vue项目中使用better-scroll实现菜单映射功能方法
2019/09/11 Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
2020/05/20 Javascript
[02:19]DOTA2上海特级锦标赛 观赛指南 Spectator Guide
2016/02/04 DOTA
Python3 replace()函数使用方法
2018/03/19 Python
Python3标准库总结
2019/02/19 Python
Django保护敏感信息的方法示例
2019/05/09 Python
选择python进行数据分析的理由和优势
2019/06/25 Python
Django Model层F,Q对象和聚合函数原理解析
2020/11/12 Python
巴西最大的体育用品商城:Netshoes巴西
2016/11/29 全球购物
公司拓展活动方案
2014/02/13 职场文书
趣味比赛活动方案
2014/02/15 职场文书
技术总监管理职责范本
2014/03/06 职场文书
2014全国两会学习心得体会1000字
2014/03/10 职场文书
文体活动总结范文
2014/05/05 职场文书
2015元旦家电促销活动策划方案
2014/12/09 职场文书
部门优秀员工推荐信
2015/03/24 职场文书
学雷锋献爱心活动总结
2015/05/11 职场文书
民事调解协议书
2016/03/21 职场文书
POST提交数据常见的四种方式
2022/01/18 HTML / CSS
一条 SQL 语句执行过程
2022/03/17 MySQL