27 123
发新话题
打印

PHP+JS无限级可伸缩菜单详解(递归方法)

PHP+JS无限级可伸缩菜单详解(递归方法)

一般在CMS系统后台中都要用到的类别管理部分的精华--无限级分类菜单,对于新手来说,这个可能有一定难度,但是今天听完我细细道来,相信以后大家就都会弄这东东了。怎么实现呢?大家先做个数据库出来先:
[Copy to clipboard]
PHP CODE:
-- 
-- 
表的结构 `cr_columninfo`
-- 

CREATE TABLE `cr_columninfo` (
  `
columnidint(4NOT NULL auto_increment,
  `
columnfatheridint(4NOT NULL default '0',
  `
columnnamevarchar(100NOT NULL default '',
  `
columnaddervarchar(50NOT NULL default '',
  `
columninputdatedate 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 (10'影音明星''leehui''2006-09-28'),
(
20'校园风情''leehui1983''2006-09-28'),
(
31'港台明星''leehui''2006-09-28'),
(
40'风景图片''leehui1983''2006-09-29'),
(
54'浩瀚大海''leehui1983''2006-09-29'),
(
65'福州的海''leehui1983''2006-09-29'),
(
72'毕业图片''leehui''2006-09-29'),
(
90'体育明星''leehui1983''2006-10-02'),
(
100'精美壁纸''leehui1983''2006-10-02'),
(
110'城市风光''leehui1983''2006-10-02'),
(
120'卡通动漫''leehui1983''2006-10-02'),
(
130'游戏截图''leehui1983''2006-10-02'),
(
140'作者相册''leehui1983''2006-10-02');

这些是测试数据,基本原理就是按照树型结构建立数据字段,核心就是栏目都有本身的ID号和父栏目的ID号,依靠这两个关系,建立树型结构,顶级栏目父ID=0,这个都好理解,现在来叙述下程序执行原理,本程序采用最为普遍的递归算法来遍历子菜单,首先,先查询出所有顶级菜单,显示在一个大表格里,没一行显示一个顶级菜单,再通过递归列出所有子菜单,子菜单处在上级菜单的所在行的下一行,且行的显示属性为不显示,通过程序动态生成的行ID号,结合JS控制行的显示与隐藏,也就是类似于微软菜单的可伸缩效果,文章最后有张图有助于大家理解,这是把生成页面的HTML复制进DW来只管演示程序的最终结果。
来看代码部分,并没有难懂的语法,请大家借助注释自己阅读,有兴趣可扩展此代码。
[Copy to clipboard]
PHP CODE:
<html>
<
head>
<
meta http-equiv="Content-Type" />
<
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",""); 
     
mysql_select_db("cms"); 
     
mysql_query("SET NAMES 'GBK'");
     
//提取一级菜单 
     
$sql="select * from cms_column where columnfatherid=0"
     
$result=mysql_query($sql,$Con); 
     
//如果一级菜单存在则开始菜单的显示 
     
if(mysql_num_rows($result)>0ShowTreeMenu($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 cms_column 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' onClick='javascript:ShowMenu(Menu".$GLOBALS["ID"].");'> </td>"
          echo 
"<td class='Menu' onClick='javascript:ShowMenu(Menu".$GLOBALS["ID"].");'>"
        } 
  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>
附件: 您所在的用户组无法下载或查看附件
交流QQ群2:16142493
智能手机软件下载
PHP新手不可错过一帖
PHP新手如何获得积分
论坛需要你,我们大家需要你!

TOP

沙发
CMS后台必然要用到的东西
我以我的人格保证
这确实是个好东西
交流QQ群2:16142493
智能手机软件下载
PHP新手不可错过一帖
PHP新手如何获得积分
论坛需要你,我们大家需要你!

TOP

今天才看到,好东西。。。我先学习。。。

TOP

学习好了。。。嘿嘿,谢谢亲爱的所所哈。。。

TOP

学习学习学习

TOP

今天才看到,好东西。。。我先学习。。。

TOP

怎么我下不了,什么原应

TOP

  一直没看到,顶了~~~

TOP

我也下不了,我刚注册的

TOP

偶很想要代码的55555555
不过有上面的说明,自己做起来也容易了,这两天要做个分级菜单,一直没想明白怎样设计数据库,以及怎样调用数据。
现在知道了。

TOP

 27 123
发新话题