樹型菜單在很多桌面應用系統中都有非常廣泛的應用，其主要優點是結構清晰，利於使用者非常清楚的知道目前自己所在的位置。但在web上樹型菜單的應用因為沒有理想的現成組件可以拿過來直接使用，所以一般的情況下，程序員主要是通過javascript來實現一些簡單的樹型結構菜單，但這些菜單往往都是事先定好各菜單項目，以及各菜單項目之間的層次關系，不利於擴充，一旦需要另一個菜單結構時，往往還需要重新編寫，因此使用起來不是很方便。 經過對函數遞歸的研究，我發現這種樹型菜單可以通過遞歸函數，使樹型菜單的顯示實現動態變化，並沒有級數的限制。下面就是我用PHP,mysql,JavaScript寫的一個動態樹型菜單的處理代碼，如果大家有興趣的話，就和我一起來看看我是如何實現的吧：） 首先，我們需要一個數據庫，在這個數據庫中，我們建立以下一張表： CREATE TABLE menu ( id tinyint(4) NOT NULL auto_increment, parent_id tinyint(4) DEFAULT '0' NOT NULL, name varchar(20), url varchar(60), PRIMARY KEY (id) ); 這張表中 id 為索引 parent_id 用來保存上一級菜單的id號，如果是一級菜單則為0 name 為菜單的名稱，也就是要在頁面上顯示的菜單內容 url 如果某菜單為末級菜單，則需要指定該連接的url地址，這個字段就是用來保存此地址的，其他非末級菜單，該字段為空 好了，數據庫有了，你就可以添加一些記錄了，下面是我做測試的時候，使用的一些記錄： INSERT INTO menu VALUES ( '1', '0', '人事管理', ''); INSERT INTO menu VALUES ( '2', '0', '通訊交流', ''); INSERT INTO menu VALUES ( '3', '1', '檔案管理', ''); INSERT INTO menu VALUES ( '4', '1', '考勤管理', 'http://localhost/personal/attendance.php'); INSERT INTO menu VALUES ( '5', '2', '通訊錄', ''); INSERT INTO menu VALUES ( '6', '2', '網絡會議', ''); INSERT INTO menu VALUES ( '7', '3', '新增檔案', 'http://localhost/personal/add_achive.php'); INSERT INTO menu VALUES ( '8', '3', '查詢檔案', 'http://localhost/personal/search_archive.php'); INSERT INTO menu VALUES ( '9', '3', '刪除檔案', 'http://localhost/personal/delete_archive.php'); INSERT INTO menu VALUES ( '10', '5', '新增通訊記錄','http://localhost/communication/add_address.php'); INSERT INTO menu VALUES ( '11', '5', '查詢通訊記錄', http://localhost/communication/search_address.php'); INSERT INTO menu VALUES ( '12', '5', '刪除通訊記錄', http://localhost/communication/delete_address.php'); INSERT INTO menu VALUES ( '13', '6', '召開會議', 'http://localhost/communication/convence_meeting.php'); INSERT INTO menu VALUES ( '14', '6', '會議查詢', 'http://localhost/communication/search_meeting.php'); 在添加記錄的時候，一定要注意，非一級菜單的parent_id一定要指定為上級菜單的ID號，否則你的菜單是不會顯示出來的：） 好了！有了數據庫，下面就是通過php,JavaScript把菜單從數據庫中讀出來，並顯示出來了：） 1、JavaScript腳本： function ShowMenu(MenuID) { if(MenuID.style.display=="none") { MenuID.style.display=""; } else { MenuID.style.display="none"; } } 這個腳本很簡單，就是用來響應點擊某個菜單被點擊的事件的。 2、Css文件： <!-- 表格樣式 --> TD { FONT-FAMILY: "Verdana", "宋體"; FONT-SIZE: 12px; LINE-HEIGHT: 130%; letter-spacing:1px } <!-- 超級連接樣式 --> A:link { COLOR: #990000; FONT-FAMILY: "Verdana", "宋體"; FONT-SIZE: 12px; TEXT-DECORATION: none; letter-spacing:1px } A:visited { COLOR: #990000; FONT-FAMILY: "Verdana", "宋體"; FONT-SIZE: 12px; TEXT-DECORATION: none; letter-spacing:1px } A:active { COLOR: #990000; FONT-FAMILY: "Verdana", "宋體"; FONT-SIZE: 12px; TEXT-DECORATION: none; letter-spacing:1px } A:hover { COLOR: #ff0000; FONT-FAMILY: "Verdana", "宋體"; FONT-SIZE: 12px; TEXT-DECORATION: underline; letter-spacing:1px } <!-- 其他樣式 --> .Menu { COLOR:#000000; FONT-FAMILY: "Verdana", "宋體"; FONT-SIZE: 12px; CURSOR: hand } 定義了一些基本的樣式信息，比如字體，顏色，超級連接的樣式等，如果你想改變樣式的話，只要修改這裡就行了！ 3、下面就是我的php頁面了！ <Html> <head> <link href='style.css' rel=stylesheet> <script language="JavaScript" src="TreeMenu.js"></script> </head> <body> <?php //基本變量設置 $GLOBALS["ID"] =1; //用來跟蹤下拉菜單的ID號 $layer=1; //用來跟蹤當前菜單的級數 //連接數據庫 $Con=mysql_connect("localhost","root",""); mysql_select_db("work"); //提取一級菜單 $sql="select * from menu where parent_id=0"; $result=mysql_query($sql,$Con); //如果一級菜單存在則開始菜單的顯示 if(mysql_num_rows($result)>0) ShowTreeMenu($Con,$result,$layer,$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'>"; for($rows=0;$rows<$numrows;$rows++) { //將當前菜單項目的內容導入數組 $menu=mysql_fetch_array($result); //提取菜單項目的子菜單記錄集 $sql="select * from menu where parent_id=$menu[id]"; $result_sub=mysql_query($sql,$Con); echo "<tr>"; //如果該菜單項目有子菜單，則添加JavaScript onClick語句 if(mysql_num_rows($result_sub)>0) { echo "<td width='20'><img src=http://www.QQread.com/Linux/folder.gif border='0'></td>"; echo "<td class='Menu' onClick='javascript:ShowMenu(Menu".$GLOBALS["ID"].");'>"; } else { echo "<td width='20'><img src=http://www.qqread.com/linux/file.gif border='0'></td>"; echo "<td class='Menu'>"; } //如果該菜單項目沒有子菜單，並指定了超級連接地址，則指定為超級連接， //否則只顯示菜單名稱 if($menu[url]!="") echo "<a href='$menu[url]'>$menu[name]</a>"; else echo $menu[name]; 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); //子菜單處理完成，返回到遞歸的上一層，將級數減1 $layer--; echo "</td></tr>"; } //繼續顯示下一個菜單項目 } echo "</table>"; } ?> </body> </html> 在上面的php頁面裡面，我定義了一個函數ShowTreeMenu()，通過這個函數的調用，會從數據庫中遞歸的調出每個菜單項目，並顯示在頁面上了：）
