jstree 動態載入樹形選單完整範例：資料庫→資料表→欄位三級聯動

需求分析

專案需實現資料庫瀏覽樹：點擊資料庫節點 → 異步載入資料表 → 點擊資料表節點 → 異步載入欄位。後端提供 REST API，前端使用 jstree 渲染與交互。

後端 API 設計

# 獲取根節點（資料庫列表）
GET /api/databases
Response: [{"id": "db1", "text": "用戶庫", "children": true}, {"id": "db2", "text": "訂單庫", "children": true}]

# 獲取子節點（根據父節點 ID 和類型）
GET /api/nodes?parentId=db1&parentType=database
Response: [{"id": "tbl_users", "text": "users", "type": "table", "children": true}, ...]

GET /api/nodes?parentId=tbl_users&parentType=table
Response: [{"id": "col_id", "text": "id (PK)", "type": "column", "icon": "jstree-file"}, ...]

前端完整實現

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jstree 動態載入示例</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jstree@3.3.12/dist/themes/default/style.min.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jstree@3.3.12/dist/jstree.min.js"></script>
</head>
<body>
    <div id="db-tree" style="width: 300px; height: 500px; border: 1px solid #ccc;"></div>

    <script>
    $(function() {
        $('#db-tree').jstree({
            'core': {
                'data': {
                    'url': '/api/databases',  // 根節點
                    'dataType': 'json',
                    'cache': false,
                    'data': function(node) {
                        // 子節點動態載入參數
                        return {
                            'parentId': node.id === '#' ? '' : node.id,
                            'parentType': node.id === '#' ? '' : node.type
                        };
                    }
                },
                'themes': {
                    'dots': true,
                    'icons': true
                }
            },
            'types': {
                'database': { 'icon': 'jstree-folder' },
                'table': { 'icon': 'jstree-folder' },
                'column': { 'icon': 'jstree-file', 'valid_children': [] }
            },
            'plugins': ['types', 'wholerow', 'contextmenu']
        }).on('select_node.jstree', function(e, data) {
            var node = data.node;
            console.log('選中節點:', node.id, node.text, node.type);
            // 業務邏輯：顯示欄位詳情、生成 SQL 等
        });
    });
    </script>
</body>
</html>

關鍵配置詳解

進階功能擴展

1. 右鍵選單（新建/重命名/刪除資料表）

'contextmenu': {
    'items': function(node) {
        var items = {
            'create': { 'label': '新建資料表', 'action': function() { /* AJAX POST */ } },
            'rename': { 'label': '重命名' },
            'remove': { 'label': '刪除' }
        };
        if (node.type === 'column') delete items.create; // 欄位不可建子節點
        return items;
    }
}

2. 搜尋/過濾節點

$('#search-input').on('keyup', function() {
    $('#db-tree').jstree(true).search($(this).val());
});

3. 大數據量虛擬滾動優化

• 後端分頁：?parentId=xxx&page=1&size=100
• 前端啟用 jquery.jstree.lazy.js 或自定義滾動加載
• 節點超過 500 時建議分頁或虛擬列表

常見坑點

• ID 重複：確保全樹節點 ID 全域唯一（建議 db1.tbl_users.col_id 格式）
• 同步 vs 異步：core.data 必須返回 Promise 或使用回調，**不能**同步返回 AJAX 結果
• 狀態保持：頁面刷新後恢復展開狀態需配合 state plugin + localStorage/後端儲存

完整 Demo 可參考 官方文檔 core.data 章節，結合上述代碼即可快速落地資料庫→資料表→欄位三級動態樹。