用 PHP 打造 Windows 資源管理器風格樹狀選單完整教學

前言

想在網頁呈現像 Windows 檔案總管般可展開/摺疊的樹狀選單？本文提供一套純 PHP + JavaScript 實作，資料來源為純文字檔，無需資料庫，部署輕鬆。

所需素材

• PHP 腳本 treemenu.inc
• 選單結構檔 demomenu.txt
• 圖示檔（可從 Windows 檔案總管擷取或自行繪製）：
  • tree_expand.gif（+ 號）
  • tree_collapse.gif（- 號）
  • tree_vertline.gif（豎線 |）
  • tree_split.gif（分支 ├─）
  • tree_end.gif（末端 └─）
  • tree_leaf.gif（葉子節點 ●）
  • tree_space.gif（空白佔位）

選單資料格式

每行代表一個節點，欄位以 | 分隔：

層級(用.表示)|顯示文字|連結網址|目標視窗|是否為子樹最後一項

範例：

.<b>Demo menu</b>|javascript:alert('Demo')|
..<b>目錄1</b>|
...<b>子目錄 1.1</b>|
....item 1.1.1|javascript:alert('1.1.1')|_self|1

• 層級以開頭 . 數量決定（1 個點 = 第 1 層）。
• 連結、目標、最後一項皆可留空。

核心 PHP 程式碼解析

<?php
// treemenu.inc
$treefile = "demomenu.txt";           // 結構檔路徑
$script   = isset($PATH_INFO) ? $PATH_INFO : $SCRIPT_NAME;

// 圖示設定
$img_expand = "tree_expand.gif";
$img_collapse = "tree_collapse.gif";
$img_line = "tree_vertline.gif";
$img_split = "tree_split.gif";
$img_end = "tree_end.gif";
$img_leaf = "tree_leaf.gif";
$img_spc = "tree_space.gif";

// 讀取並解析結構檔
$maxlevel = 0; $cnt = 0;
$fd = fopen($treefile, "r");
if (!$fd) die("無法開啟 $treefile");

while ($buffer = fgets($fd, 4096)) {
    $tree[$cnt][0] = strspn($buffer, ".");           // 層級
    $tmp = rtrim(substr($buffer, $tree[$cnt][0]));   // 去除層級符號
    $node = explode("|", $tmp);                      // 分割欄位
    $tree[$cnt][1] = $node[0];                       // 顯示文字
    $tree[$cnt][2] = $node[1];                       // 連結
    $tree[$cnt][3] = $node[2];                       // target
    $tree[$cnt][4] = $node[3];                       // 是否最後
    $maxlevel = max($maxlevel, $tree[$cnt][0]);
    $cnt++;
}
fclose($fd);
// ... 後續輸出 HTML/JS 代碼 ...
?>

前端呈現邏輯

1. PHP 將解析後的陣列輸出為 JavaScript 陣列變數。
2. JS 根據層級遞迴產生 <ul><li> 結構，並依「是否最後」決定顯示 tree_split.gif 或 tree_end.gif。
3. 點擊 +/- 圖示切換 display:none/block 並更換圖片，實現展開/摺疊。

部署步驟

1. 將所有檔案放入同一目錄。
2. 確認圖示檔名與程式碼設定一致。
3. 在頁面引入 require('treemenu.inc'); 即可顯示選單。

進階擴充建議

• 加入 Cookie 記住展開狀態，頁面重整不重置。
• 改用 JSON 格式儲存結構，支援 AJAX 動態載入子節點。
• 搭配 CSS 美化，支援深色模式、圖示字型（FontAwesome）替代圖片。

完整原始碼請參考附件 treemenu.inc 與 demomenu.txt，直接部署即可運行。