ExtJS TreePanel 從 Servlet 動態加載 JSON 數據實戰

架構模式

前端 TreePanel + AsyncTreeNode + TreeLoader → 請求後端 Servlet → 返回節點 JSON → 動態渲染展開。

後端 Servlet 實現

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.*;
import javax.servlet.http.*;

public class TreeNodeServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html;charset=utf-8");
        String treeNode = request.getParameter("node"); // AsyncTreeNode 的 id
        String json = "";
        PrintWriter out = response.getWriter();

        if ("0".equals(treeNode)) {
            json = "[{id:1,text:'0-1'},{id:2,text:'0-2'}]";
        } else if ("1".equals(treeNode)) {
            json = "[{id:11,text:'0-1-1',leaf:true},{id:12,text:'0-1-2',leaf:true}]";
        } else if ("2".equals(treeNode)) {
            json = "[{id:21,text:'0-2-1'},{id:22,text:'0-2-2',leaf:true}]";
        } else if ("21".equals(treeNode)) {
            json = "[{id:211,text:'0-2-1-1',leaf:true},{id:212,text:'0-2-1-2',leaf:true}]";
        }
        out.write(json);
    }
}

前端 TreePanel 配置

Ext.onReady(function() {
    var tree = new Ext.tree.TreePanel({
        el: 'div-tree',
        loader: new Ext.tree.TreeLoader({dataUrl: '../TreeNodeServlet'})
    });

    var root = new Ext.tree.AsyncTreeNode({id: '0', text: '0'});
    tree.setRootNode(root);
    tree.render();
    root.expand(); // 初始展開根節點，觸發首次加載
});

關鍵交互流程

1. 頁面加載 → 渲染樹 → root.expand()
2. 展開節點 → TreeLoader 請求 dataUrl?node=節點ID
3. Servlet 根據 node 參數查詢業務數據 → 拼接 JSON 返回
4. TreeLoader 解析 JSON → 創建子節點 → 掛載到展開節點下
5. 用戶繼續展開 → 重複步驟 2-4（按需懶加載）

效果演示

生產級改進要點

• JSON 序列化：用 Jackson/Gson 替代手工拼接，防注入、支援複雜對象
• 參數校驗：node 參數白名單/長度限制，防注入
• 異常處理：try-catch 返回統一錯誤格式 {success:false,msg:'...'}
• 權限控制：根據用戶角色過濾可見節點
• 緩存策略：靜態樹結構緩存至 Redis，減少 DB 壓力
• 分頁/虛擬滾動：超大節點數時避免一次性渲染

總結

ExtJS TreePanel 懶加載機制：AsyncTreeNode + TreeLoader(dataUrl) + 後端按 node 參數動態返回 JSON。掌握前端配置、後端參數約定、JSON 格式、展開觸發流程，即可實現高性能大樹結構展示。