PHP+JS無(wú)限級(jí)可伸縮菜單詳解（簡(jiǎn)單易懂）
更新時(shí)間：2007年01月02日 00:00:00 作者：
發(fā)了幾天基礎(chǔ)的東西，今天來(lái)點(diǎn)稍微難的，一般在CMS系統(tǒng)后臺(tái)中都要用到的類別管理部分的精華－－無(wú)限級(jí)分類菜單，對(duì)于新手來(lái)說(shuō)，這個(gè)可能有一定難度，但是今天聽(tīng)完我細(xì)細(xì)道來(lái)，相信以后大家就都會(huì)弄這東東了。怎么實(shí)現(xiàn)呢？大家先做個(gè)數(shù)據(jù)庫(kù)出來(lái)先：
--
-- 表的結(jié)構(gòu) `cr_columninfo`
--
這些是測(cè)試數(shù)據(jù)，基本原理就是按照樹(shù)型結(jié)構(gòu)建立數(shù)據(jù)字段，核心就是欄目都有本身的ID號(hào)和父欄目的ID號(hào)，依靠這兩個(gè)關(guān)系，建立樹(shù)型結(jié)構(gòu)，頂級(jí)欄目父ID＝0，這個(gè)都好理解，現(xiàn)在來(lái)敘述下程序執(zhí)行原理，本程序采用最為普遍的遞歸算法來(lái)遍歷子菜單，首先，先查詢出所有頂級(jí)菜單，顯示在一個(gè)大表格里，沒(méi)一行顯示一個(gè)頂級(jí)菜單，再通過(guò)遞歸列出所有子菜單，子菜單處在上級(jí)菜單的所在行的下一行，且行的顯示屬性為不顯示，通過(guò)程序動(dòng)態(tài)生成的行ID號(hào)，結(jié)合JS控制行的顯示與隱藏，也就是類似于微軟菜單的可伸縮效果，文章最后有張圖有助于大家理解，這是把生成頁(yè)面的HTML復(fù)制進(jìn)DW來(lái)只管演示程序的最終結(jié)果。
來(lái)看代碼部分，并沒(méi)有難懂的語(yǔ)法，請(qǐng)大家借助注釋自己閱讀，有興趣可擴(kuò)展此代碼。
PHP代碼如下:
最后貼上效果圖和源代碼打包，希望本文對(duì)大家有所幫助^_^
下載此文件
--
-- 表的結(jié)構(gòu) `cr_columninfo`
--
復(fù)制代碼 代碼如下:
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 ;
-- 導(dǎo)出表中的數(shù)據(jù) `cr_columninfo`
--
INSERT INTO `cr_columninfo` (`columnid`, `columnfatherid`, `columnname`, `columnadder`, `columninputdate`) VALUES (1, 0, '影音明星', 'leehui', '2006-09-28'),
(2, 0, '校園風(fēng)情', 'leehui1983', '2006-09-28'),
(3, 1, '港臺(tái)明星', 'leehui', '2006-09-28'),
(4, 0, '風(fēng)景圖片', 'leehui1983', '2006-09-29'),
(5, 4, '浩瀚大海', 'leehui1983', '2006-09-29'),
(6, 5, '福州的海', 'leehui1983', '2006-09-29'),
(7, 2, '畢業(yè)圖片', 'leehui', '2006-09-29'),
(9, 0, '體育明星', 'leehui1983', '2006-10-02'),
(10, 0, '精美壁紙', 'leehui1983', '2006-10-02'),
(11, 0, '城市風(fēng)光', 'leehui1983', '2006-10-02'),
(12, 0, '卡通動(dòng)漫', 'leehui1983', '2006-10-02'),
(13, 0, '游戲截圖', 'leehui1983', '2006-10-02'),
(14, 0, '作者相冊(cè)', 'leehui1983', '2006-10-02');
`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 ;
-- 導(dǎo)出表中的數(shù)據(jù) `cr_columninfo`
--
INSERT INTO `cr_columninfo` (`columnid`, `columnfatherid`, `columnname`, `columnadder`, `columninputdate`) VALUES (1, 0, '影音明星', 'leehui', '2006-09-28'),
(2, 0, '校園風(fēng)情', 'leehui1983', '2006-09-28'),
(3, 1, '港臺(tái)明星', 'leehui', '2006-09-28'),
(4, 0, '風(fēng)景圖片', 'leehui1983', '2006-09-29'),
(5, 4, '浩瀚大海', 'leehui1983', '2006-09-29'),
(6, 5, '福州的海', 'leehui1983', '2006-09-29'),
(7, 2, '畢業(yè)圖片', 'leehui', '2006-09-29'),
(9, 0, '體育明星', 'leehui1983', '2006-10-02'),
(10, 0, '精美壁紙', 'leehui1983', '2006-10-02'),
(11, 0, '城市風(fēng)光', 'leehui1983', '2006-10-02'),
(12, 0, '卡通動(dòng)漫', 'leehui1983', '2006-10-02'),
(13, 0, '游戲截圖', 'leehui1983', '2006-10-02'),
(14, 0, '作者相冊(cè)', 'leehui1983', '2006-10-02');
這些是測(cè)試數(shù)據(jù)，基本原理就是按照樹(shù)型結(jié)構(gòu)建立數(shù)據(jù)字段，核心就是欄目都有本身的ID號(hào)和父欄目的ID號(hào)，依靠這兩個(gè)關(guān)系，建立樹(shù)型結(jié)構(gòu)，頂級(jí)欄目父ID＝0，這個(gè)都好理解，現(xiàn)在來(lái)敘述下程序執(zhí)行原理，本程序采用最為普遍的遞歸算法來(lái)遍歷子菜單，首先，先查詢出所有頂級(jí)菜單，顯示在一個(gè)大表格里，沒(méi)一行顯示一個(gè)頂級(jí)菜單，再通過(guò)遞歸列出所有子菜單，子菜單處在上級(jí)菜單的所在行的下一行，且行的顯示屬性為不顯示，通過(guò)程序動(dòng)態(tài)生成的行ID號(hào)，結(jié)合JS控制行的顯示與隱藏，也就是類似于微軟菜單的可伸縮效果，文章最后有張圖有助于大家理解，這是把生成頁(yè)面的HTML復(fù)制進(jìn)DW來(lái)只管演示程序的最終結(jié)果。
來(lái)看代碼部分，并沒(méi)有難懂的語(yǔ)法，請(qǐng)大家借助注釋自己閱讀，有興趣可擴(kuò)展此代碼。
PHP代碼如下:
復(fù)制代碼 代碼如下:
<html>
<head>
<meta http-equiv="Content-Type" c />
<title>類別目錄樹(shù)</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>欄目樹(shù)形結(jié)構(gòu)列表</strong></td>
</tr>
</table>
<?php
//基本變量設(shè)置
$GLOBALS["ID"] =1; //用來(lái)跟蹤下拉菜單的ID號(hào)
$layer=1; //用來(lái)跟蹤當(dāng)前菜單的級(jí)數(shù)
//連接數(shù)據(jù)庫(kù)
$Con=mysql_connect("localhost","root","7529639");
mysql_select_db("cr_download");
mysql_query("SET NAMES 'GBK'");
//提取一級(jí)菜單
$sql="select * from cr_columninfo where columnfatherid=0";
$result=mysql_query($sql,$Con);
//如果一級(jí)菜單存在則開(kāi)始菜單的顯示
if(mysql_num_rows($result)>0) ShowTreeMenu($Con,$result,$ID);
//=============================================
//顯示樹(shù)型菜單函數(shù) ShowTreeMenu($con,$result,$layer)
//$con：數(shù)據(jù)庫(kù)連接
//$result：需要顯示的菜單記錄集
//$layer：需要顯示的菜單的級(jí)數(shù)
//=============================================
function ShowTreeMenu($Con,$result,$layer)
{
//取得需要顯示的菜單的項(xiàng)目數(shù)
$numrows=mysql_num_rows($result);
//開(kāi)始顯示菜單，每個(gè)子菜單都用一個(gè)表格來(lái)表示
echo "<table cellpadding='0' cellspacing='0' border='0' width='100%'>";
for($rows=0;$rows<$numrows;$rows++)
{
//將當(dāng)前菜單項(xiàng)目的內(nèi)容導(dǎo)入數(shù)組
$menu=mysql_fetch_array($result);
//提取菜單項(xiàng)目的子菜單記錄集
$sql="select * from cr_columninfo where columnfatherid=$menu[columnid]";
$result_sub=mysql_query($sql,$Con);
echo "<tr>";
//如果該菜單項(xiàng)目有子菜單，則添加JavaScript onClick語(yǔ)句
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'>";
}
//如果該菜單項(xiàng)目沒(méi)有子菜單，只顯示菜單名稱
echo $menu[columnname];
echo "</td></tr>";
//如果該菜單項(xiàng)目有子菜單，則顯示子菜單
if(mysql_num_rows($result_sub)>0)
{
//指定該子菜單的ID和style，以便和onClick語(yǔ)句相對(duì)應(yīng)
echo "<tr id=Menu".$GLOBALS["ID"]++." style='display:none'>";
echo "<td width='20'> </td>";
echo "<td>";
//將級(jí)數(shù)加1
$layer++;
//遞歸調(diào)用ShowTreeMenu()函數(shù)，生成子菜單
ShowTreeMenu($Con,$result_sub,$layer);
//子菜單處理完成，返回到遞歸的上一層
echo "</td></tr>";
}
//子菜單處理完成，返回到遞歸的上一層，將級(jí)數(shù)減1
$layer--;
}
echo "</table>";
}
?>
</body>
</html>
<head>
<meta http-equiv="Content-Type" c />
<title>類別目錄樹(shù)</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>欄目樹(shù)形結(jié)構(gòu)列表</strong></td>
</tr>
</table>
<?php
//基本變量設(shè)置
$GLOBALS["ID"] =1; //用來(lái)跟蹤下拉菜單的ID號(hào)
$layer=1; //用來(lái)跟蹤當(dāng)前菜單的級(jí)數(shù)
//連接數(shù)據(jù)庫(kù)
$Con=mysql_connect("localhost","root","7529639");
mysql_select_db("cr_download");
mysql_query("SET NAMES 'GBK'");
//提取一級(jí)菜單
$sql="select * from cr_columninfo where columnfatherid=0";
$result=mysql_query($sql,$Con);
//如果一級(jí)菜單存在則開(kāi)始菜單的顯示
if(mysql_num_rows($result)>0) ShowTreeMenu($Con,$result,$ID);
//=============================================
//顯示樹(shù)型菜單函數(shù) ShowTreeMenu($con,$result,$layer)
//$con：數(shù)據(jù)庫(kù)連接
//$result：需要顯示的菜單記錄集
//$layer：需要顯示的菜單的級(jí)數(shù)
//=============================================
function ShowTreeMenu($Con,$result,$layer)
{
//取得需要顯示的菜單的項(xiàng)目數(shù)
$numrows=mysql_num_rows($result);
//開(kāi)始顯示菜單，每個(gè)子菜單都用一個(gè)表格來(lái)表示
echo "<table cellpadding='0' cellspacing='0' border='0' width='100%'>";
for($rows=0;$rows<$numrows;$rows++)
{
//將當(dāng)前菜單項(xiàng)目的內(nèi)容導(dǎo)入數(shù)組
$menu=mysql_fetch_array($result);
//提取菜單項(xiàng)目的子菜單記錄集
$sql="select * from cr_columninfo where columnfatherid=$menu[columnid]";
$result_sub=mysql_query($sql,$Con);
echo "<tr>";
//如果該菜單項(xiàng)目有子菜單，則添加JavaScript onClick語(yǔ)句
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'>";
}
//如果該菜單項(xiàng)目沒(méi)有子菜單，只顯示菜單名稱
echo $menu[columnname];
echo "</td></tr>";
//如果該菜單項(xiàng)目有子菜單，則顯示子菜單
if(mysql_num_rows($result_sub)>0)
{
//指定該子菜單的ID和style，以便和onClick語(yǔ)句相對(duì)應(yīng)
echo "<tr id=Menu".$GLOBALS["ID"]++." style='display:none'>";
echo "<td width='20'> </td>";
echo "<td>";
//將級(jí)數(shù)加1
$layer++;
//遞歸調(diào)用ShowTreeMenu()函數(shù)，生成子菜單
ShowTreeMenu($Con,$result_sub,$layer);
//子菜單處理完成，返回到遞歸的上一層
echo "</td></tr>";
}
//子菜單處理完成，返回到遞歸的上一層，將級(jí)數(shù)減1
$layer--;
}
echo "</table>";
}
?>
</body>
</html>
最后貼上效果圖和源代碼打包，希望本文對(duì)大家有所幫助^_^
下載此文件
您可能感興趣的文章:
- 基于BootStrap Metronic開(kāi)發(fā)框架經(jīng)驗(yàn)小結(jié)【二】列表分頁(yè)處理和插件JSTree的使用
- jsTree 基于JQuery的排序節(jié)點(diǎn) Bug
- jquery下jstree簡(jiǎn)單應(yīng)用 - v1.0
- jquery.jstree 增加節(jié)點(diǎn)的雙擊事件代碼
- 基于jsTree的無(wú)限級(jí)樹(shù)JSON數(shù)據(jù)的轉(zhuǎn)換代碼
- JQery jstree 大數(shù)據(jù)量問(wèn)題解決方法
- jsTree樹(shù)控件(基于jQuery, 超強(qiáng)悍)[推薦]
- 關(guān)于無(wú)限分級(jí)(ASP+數(shù)據(jù)庫(kù)+JS)的實(shí)現(xiàn)代碼
- js實(shí)現(xiàn)無(wú)限級(jí)樹(shù)形導(dǎo)航列表效果代碼
- json+jQuery實(shí)現(xiàn)的無(wú)限級(jí)樹(shù)形菜單效果代碼
- javascript實(shí)現(xiàn)無(wú)限級(jí)select聯(lián)動(dòng)菜單
- 基于jquery的無(wú)限級(jí)聯(lián)下拉框js插件
- js無(wú)限級(jí)折疊菜單精簡(jiǎn)版
- php 無(wú)限級(jí)數(shù)據(jù)JSON格式及JS解析
- jstree創(chuàng)建無(wú)限分級(jí)樹(shù)的方法【基于ajax動(dòng)態(tài)創(chuàng)建子節(jié)點(diǎn)】
相關(guān)文章
使用tp框架和SQL語(yǔ)句查詢數(shù)據(jù)表中的某字段包含某值
今天小編就為大家分享一篇使用tp框架和SQL語(yǔ)句查詢數(shù)據(jù)表中的某字段包含某值，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
Laravel timestamps 設(shè)置為unix時(shí)間戳的方法
今天小編就為大家分享一篇Laravel timestamps 設(shè)置為unix時(shí)間戳的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
利用php_imagick實(shí)現(xiàn)復(fù)古效果的方法
相信對(duì)于php_imagick很多人都不陌生，這篇文章先進(jìn)行簡(jiǎn)單的介紹了php_imagick和簡(jiǎn)單的示例，而后通過(guò)示例代碼介紹了利用php_imagick實(shí)現(xiàn)復(fù)古效果的方法，對(duì)大家的學(xué)習(xí)和工作具有一定的參考借鑒價(jià)值，有需要的朋友們下面來(lái)一起看看吧。2016-10-10
基于jQueryUI和Corethink實(shí)現(xiàn)百度的搜索提示功能
這篇文章主要介紹了基于jQueryUI和Corethink實(shí)現(xiàn)百度的搜索提示功能，這里是以corethink模塊的形式，只需要安裝上訪問(wèn)index.php?s=/test/index 就可以了,需要的朋友可以參考下2016-11-11
Linux中用PHP判斷程序運(yùn)行狀態(tài)的2個(gè)方法
這篇文章主要介紹了Linux中用PHP判斷程序運(yùn)行狀態(tài)的2個(gè)方法,需要的朋友可以參考下2014-05-05
淺談php中的循環(huán)while、do...while、for、foreach四種循環(huán)
下面小編就為大家?guī)?lái)一篇淺談php中的循環(huán)while、do...while、for、foreach四種循環(huán)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11
七年以來(lái)，PHP一直是第四大最流行的編程語(yǔ)言，驅(qū)動(dòng)全球超過(guò)2億多個(gè)網(wǎng)站，全球超過(guò)81.7%的公共網(wǎng)站在服務(wù)器端采用PHP。PHP在這個(gè)星期有了自2004年以來(lái)最大的飛躍，因?yàn)镻HP 7已經(jīng)發(fā)布2016-01-01
Yii使用ajax驗(yàn)證顯示錯(cuò)誤messagebox的解決方法
這篇文章主要介紹了Yii使用ajax驗(yàn)證顯示錯(cuò)誤messagebox的解決方法,可以自行設(shè)置Ajax提示信息的方式,是非常實(shí)用的技巧,需要的朋友可以參考下2014-12-12
常見(jiàn)的5個(gè)PHP編碼小陋習(xí)以及優(yōu)化實(shí)例講解
這篇文章主要介紹了常見(jiàn)的5個(gè)PHP編碼小陋習(xí)實(shí)例講解，講解了常見(jiàn)寫(xiě)法和優(yōu)化方法，看一下是否自己也是這樣寫(xiě)的呢2021-02-02
Laravel框架數(shù)據(jù)庫(kù)CURD操作、連貫操作總結(jié)
這篇文章主要介紹了Laravel框架數(shù)據(jù)庫(kù)CURD操作、連貫操作、鏈?zhǔn)讲僮骺偨Y(jié),本文包含大量數(shù)據(jù)庫(kù)操作常用方法,需要的朋友可以參考下2014-09-09