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

发了几天基础的东西,今天来点稍微难的,一般在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>


最后贴上效果图和源代码打包,希望本文对大家有所帮助^_^
下载此文件 

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/14c7d7691689de8ec4e648d647af0941.html