程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 網頁編程 >> PHP編程 >> 關於PHP編程 >> PHP+JS無限級可伸縮菜單詳解(簡單易懂)

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

編輯:關於PHP編程

發了幾天基礎的東西,今天來點稍微難的,一般在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>
最後貼上效果圖和源代碼打包,希望本文對大家有所幫助^_^
下載文件 下載此文件 

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved