您的位置：首页 > 编程语言 > PHP开发

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

2008-06-18 13:37 761 查看

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来只管演示程序的最终结果。
来看代码部分，并没有难懂的语法，请大家借助注释自己阅读，有兴趣可扩展此代码。

<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","fkedwgwy"); 

     mysql_select_db("tree"); 

     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='plus.JPG' 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='plus.JPG' 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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航