PHP 可折疊樹形菜單類 (xzn_html_tree 1.0) 完整實現

基於 FrontPage JavaScript 的 PHP 樹形菜單生成類

本類庫封裝了可折疊大綱樹形結構的生成邏輯，支援無限層級、任意順序添加節點，輸出相容 FrontPage 2000 JavaScript 腳本的 HTML 結構。適用於後台管理選單、站點地圖、分類導航等場景。

類結構設計

<?php
/** 節點類：封裝樹節點屬性 */
class TreeNode {
    var $id;      // 節點編號 (如 1.2.3)
    var $text;    // 顯示標題
    var $value;   // 關聯值 (通常為 URL)
    var $image;   // 節點圖標
    
    function TreeNode($id, $text, $value, $image) {
        $this->id = $id;
        $this->text = $text;
        $this->value = $value;
        $this->image = $image;
    }
}

/** 樹類：管理節點集合並輸出 HTML */
class Tree {
    var $node;    // 節點陣列
    var $jspath;  // outline.js 路徑
    
    /** 設置節點：ID 採用 1.2.3 或 1-2-3 格式，無層級限制，輸入順序不限 */
    function set($id, $text, $value="", $image="plus.gif") {
        $d = split("[.-]", $id);
        $e = "";
        for ($i=0; $inode$e;");
        $p["node"] = $n;
    }
    
    /** 輸出完整樹形 HTML */
    function display() {
        echo "<script src=\"$this->jspath/outline.js\"></script>\n";
        echo "<div class=\"outline\">\n";
        ksort($this->node);
        reset($this->node);
        while (list($key, $value) = each($this->node)) {
            $this->next($value, 0);
        }
        echo "</div>\n";
    }
    
    /** 遞歸輸出節點 */
    function next($node, $level) {
        if (!is_array($node)) return;
        
        if (isset($node["node"])) {
            $n = $node["node"];
            echo "<span class=\"outline\">\n";
            echo "<img src=\"$this->jspath/" . $n->image . "\"> ";
            if (empty($n->value)) {
                echo $n->text . " ";
            } else {
                echo "<a href=\"" . $n->value . "\">" . $n->text . "</a> ";
            }
            echo "</span>\n";
        }
        
        if (count($node) == 1) return; // 僅含自身節點，無子節點
        
        ksort($node);
        reset($node);
        while (list($key, $value) = each($node)) {
            if ($key != "node") $this->next($value, $level+1);
        }
    }
}
?>

使用範例

<?php
require_once "tree.php";

$tree = new Tree();
$tree->jspath = "/js/tree"; // outline.js 所在目錄

// 添加節點 (順序任意)
$tree->set("1", "系統管理", "", "folder.gif");
$tree->set("1.1", "用戶管理", "user_admin.php", "file.gif");
$tree->set("1.2", "權限設置", "perm_admin.php", "file.gif");
$tree->set("1.2.1", "角色管理", "role_admin.php", "file.gif");
$tree->set("2", "內容管理", "", "folder.gif");
$tree->set("2.1", "文章發布", "article_add.php", "file.gif");
$tree->set("2.2", "分類管理", "cat_admin.php", "file.gif");

// 輸出樹形菜單
$tree->display();
?>

依賴資源

• outline.js：FrontPage 2000 原生折疊腳本，需放置於 $jspath 指定目錄
• 配套圖片：plus.gif (展開)、minus.gif (折疊)、folder.gif、file.gif 等

現代化改進方向

建議重寫為原生 JavaScript (ES6 Class) + CSS 動畫，移除 eval() 使用 JSON 結構傳輸，支援鍵盤導航、無障礙訪問 (ARIA)、懶加載大數據集。