基於 dtree 實現動態樹狀選單完整範例

專案結構與依賴

從 dtree 官網 下載 dtree.zip，解壓取得：

• dtree.js — 核心邏輯
• dtree.css — 樣式表
• img/ — 圖示資源（展開/摺疊、資料夾、檔案等）

資料實體類

package com.yxx;

public class TreeInfo {
    private int nodeId = -1;
    private int parentId = -1;
    private String nodeName = null;
    private String url = null;
    private String target = null;

    // Getter/Setter 省略...
}

資料存取與 JS 生成工具類

package com.yxx;

import java.sql.*;
import java.util.*;

public class TreeUtil {

    // 1. 從資料庫讀取節點資料
    public static List<TreeInfo> retrieveNodeInfos() {
        List<TreeInfo> list = new ArrayList<>();
        String url = "jdbc:mysql://localhost:3306/test";
        try (Connection conn = DriverManager.getConnection(url, "root", "1234");
             PreparedStatement ps = conn.prepareStatement("SELECT * FROM tree_info");
             ResultSet rs = ps.executeQuery()) {

            while (rs.next()) {
                TreeInfo info = new TreeInfo();
                info.setNodeId(rs.getInt(1));
                info.setParentId(rs.getInt(2));
                info.setNodeName(rs.getString(3));
                info.setUrl(rs.getString(4));
                list.add(info);
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
        return list;
    }

    // 2. 組裝 dtree 初始化 JavaScript
    public static String createTreeInfo(List<TreeInfo> nodes) {
        StringBuilder sb = new StringBuilder();
        sb.append("<script type='text/javascript'>\n");
        sb.append("d = new dTree('d');\n");

        for (TreeInfo n : nodes) {
            sb.append(createOneItem(n));
        }

        sb.append("document.write(d);\n");
        sb.append("</script>");
        return sb.toString();
    }

    // 3. 單節點 JS 片段
    private static String createOneItem(TreeInfo n) {
        return String.format(
            "d.add(%d, %d, '%s', '%s', '%s', 'blank', '', '', false);\n",
            n.getNodeId(),
            n.getParentId(),
            escapeJs(n.getNodeName()),
            escapeJs(n.getUrl()),
            escapeJs(n.getNodeName()) // title
        );
    }

    private static String escapeJs(String s) {
        return s == null ? "" : s.replace("'", "\\'").replace("\n", "\\n").replace("\r", "");
    }

    // 4. 供 JSP 呼叫
    public String getMenuJS() {
        return createTreeInfo(retrieveNodeInfos());
    }

    public static void main(String[] args) {
        System.out.println(createTreeInfo(retrieveNodeInfos()));
    }
}

JSP 頁面整合

<%@ page contentType="text/html;charset=UTF-8" %>
<jsp:useBean id="treeUtil" scope="request" class="com.yxx.TreeUtil" />
<!DOCTYPE html>
<html>
<head>
    <title>動態樹狀選單</title>
    <link rel="stylesheet" href="dtree.css" type="text/css" />
    <script type="text/javascript" src="dtree.js"></script>
</head>
<body>
    <div class="dtree">
        <%= treeUtil.getMenuJS() %>
    </div>
</body>
</html>

資料庫表結構建議

CREATE TABLE tree_info (
    node_id   INT PRIMARY KEY,
    parent_id INT NOT NULL,
    node_name VARCHAR(100) NOT NULL,
    url       VARCHAR(255),
    INDEX idx_parent (parent_id)
);

進階擴展方向

• 非同步載入：配合 d.add() 的 action 參數實現點擊展開時 AJAX 載入子節點。
• 權限控制：DAO 層依使用者角色過濾節點。
• 狀態持久化：使用 Cookie 或 LocalStorage 記錄展開/摺疊狀態，頁面重載自動還原。
• 現代化替代：新專案建議採用 zTree、jstree 或前端框架（Vue/React）元件，功能更豐富且支援觸控裝置。

此範例展示了「後端組裝 JS 字串」的傳統模式，雖簡單直接，但前後端耦合度高。現代開發建議後端僅提供 JSON 資料，前端負責渲染與互動邏輯。