PHP+JS無限級可伸縮菜單詳解（簡單易懂）

最後更新：2018-12-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

發了幾Apsara Infrastructure Management Framework礎的東西，今天來點稍微難的，一般在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>

最後貼上和原始碼打包，希望本文對大家有所協助^_^
下載此檔案

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More