PHP+JS無限級可伸縮選單詳解（遞迴方法）
阿新 • • 發佈：2019-02-09
-- -- 表的結構 `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>