PHP+JS无限级可伸缩菜单详解

最新推荐文章于 2021-03-09 16:06:05 发布

原创最新推荐文章于 2021-03-09 16:06:05 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#php #mysql #menu #border #layer #stylesheet

php 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个使用PHP和JavaScript实现的动态生成多级菜单树的方法。通过数据库查询获取菜单信息，并利用递归函数显示成树状结构。同时，还介绍了如何通过JavaScript控制子菜单的展开与折叠。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//所用数据表的结构

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 ;

//PHP源程序如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<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>
<?
     //基本变量设置
     $GLOBALS["ID"] =1; //用来跟踪下拉菜单的ID号
     $layer=1; //用来跟踪当前菜单的级数
     //连接数据库
$datebase["host"]="localhost:6033"; //主机
$datebase["user"] = "ms"; //用户名
$datebase["password"]= "ms";//密码
$datebase["db"]="edu"; //数据库
$Con=mysql_connect($datebase["host"], $datebase["user"], $datebase["password"]) or die("连接数据库出错: " . mysql_error());
    mysql_select_db($datebase["db"],$Con) or die("Select Datebase Error: " . mysql_error());
     //提取一级菜单
     $sql="select * from menu 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 menu where columnfatherid=".$menu[columnid];
        $result_sub=mysql_query($sql,$Con);

        echo "<tr>";
        //如果该菜单项目有子菜单，则添加Javascrīpt onClick语句
        if(mysql_num_rows($result_sub)>0)
        {
          echo "<td width='20'><span onclick='ShowMenu(Menu".$GLOBALS['ID'].")' ><img src='img/plus.gif' border='0' ></span> </td>";
          echo "<td class='Menu' >";
        }
        else{
          echo "<td width='20'><img src='img/page.gif' 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>