JavaScript + PHP 應用二：網頁設計中樹形菜單的動態實現

　　樹形菜單，熟悉Windows程式管理器的讀者一定不會陌生。單擊項目左側的+號，項目展開；再次單擊，項目收縮。讀過很多篇有關樹形菜單的JavaScript實現方法，原理很簡單，都是利用Style中display屬性的控制。筆者本文的重點並不側重於此，倒是想談一談如何?每一次從資料庫中提取資料並動態更新樹形菜單。
　　樹形菜單主要用來導航。網站有很多欄目，每個欄目下有很多子欄目，欄目經常變動，如增加新欄目，改變現有欄目名稱，調整主次欄目之間關係等等，如果每一次都去改動頁面代碼，非常不便。而且因為資訊都存放在資料庫中，動態實現變得可能和必要。
　　本文並不側重理論，只是為大家提供自己的一段代碼，和大家一起來探討一下PHP實現問題。為了便於說明，筆者對資料庫作了一些改動，假設菜單字串存放在menu表中，main欄位存放主菜單字串，sub欄位存放子功能表字串，subid欄位存放子功能表標識。

<?php
 $DB = new My_DB();
 $DB->query("select subid, main from menu group by main order by subid");
 while ($DB->next_record()){
  $Main[] = $DB->f("main");
  $Key[] = $DB->f("subid");
 }
 /*首先，串連資料庫，查詢所謂的欄目名稱。以上代碼採用了PHPLib中的資料庫函數，其中，$Main數組用來存放主菜單字串，$Key數組用來存放子功能表關鍵字。大家可以採用多種方法，因人而異*/
 for ($i=0;$i<count($Main);$i++){
  $j=0;
  $DB->query("select sub, subid from menu where main='".$Main[$i]."'");
  ////利用query查詢出與當前主菜單匹配的所有子功能表字串
?>
/*以下代碼和HTML代碼結合到一起，大家看起來可能會不習慣，但這樣代碼顯得簡潔多了。為了類比樹形菜單，筆者來源程式中使用了幾個圖片檔案，l.gif, m.gif和p.gif，並利用onMouse事件類比菜單的動態效果。PHP語句主要是為Javascript製作標籤(tag)的id*/
<table width="140" border="0" cellspacing="0" cellpadding="0" class="f14">
  <tr>
    <td width="15"></td>
    <td id="<?php echo "m_".$Key[$i]; ?>" width="9" height="21"><img src="images/p.gif" width="9" height="21"></td>
    <td>
      <div style="cursor:hand" onclick="javascript:MakeMenu('<?php echo $Key[$i]; ?>')"  onMouseOver="javascript:MakeShow('in')" onMouseOut="javascript:MakeShow('out')">&nbsp;<?php echo $Main[$i]; ?></div>
    </td>
  </tr>
  <tr id="<?php echo "s_".$Key[$i]; ?>" style="display:none">
    <td width="15"></td>
    <td colspan="2">
        <table width="100%" border="0" cellspacing="0" cellpadding="0" class="f9">
        <?php
         while ($DB->next_record()){
        ?>
          <tr>
           <td width="12">
<img src="images/<?php echo ++$j==$DB->nf()?"l.gif":"t.gif"; ?>" width="12" height="21"></td>
////需要說明一下，$j變數在這裡用來決定顯示什麼圖片。此句的意思是，子功能表的最後一項顯示l.gif，其它項顯示t.gif
            <td>&nbsp;<?php echo "<a href=/"yoururl/">yourstr</a>";?></td>
          </tr>
        <?php
         }
        ?>
        </table>
    </td>
  </tr>
</table>
<?php
 }
?>
到此為止，PHP的使命已經結束，大家可以把代碼運行一下，看看輸出是什麼。總而言之，它的輸出結果正是樹形菜單所要的結構。下面我們需要構造Javascript代碼。很簡單，我不打算作向詳細的描述。
<script language="javascript1.2">
<!--
 function MakeMenu(id){
  mid="m_"+id;
  sid="s_"+id;
  with (document){
   if (all(sid).style.display=="none"){
    all(sid).style.display="";
    all(mid).innerHTML="<img src='images/m.gif' width='9' height='21'>";
   }else{
    all(sid).style.display="none";
    all(mid).innerHTML="<img src='images/p.gif' width='9' height='21'>";
   }
  }
 }
 
 function MakeShow(to){
  with (document){
   if (to=='in'){
    window.event.srcElement.style.color="red";
    window.event.srcElement.style.fontWeight="bold";
   }else{
    window.event.srcElement.style.color="";
    window.event.srcElement.style.fontWeight="";
   }
  }
 } 
-->
</script>
　　熟悉Javascript的讀者，以上代碼理解起來應該不成問題。這段代碼的痛點就在於PHP的實現部分，調試時遇到很大麻煩，總是提示Javascirpt錯誤。在排除萬難之後，把這段代碼奉獻給大家，希望能為大家以後的網頁設計工作節省一點寶貴的時間。