ZTree 初始化報錯 TypeError: tId is undefined 根因與修正

錯誤現象

使用 Play Framework 後端回傳 JSON 陣列，前端 $.fn.zTree.init 拋出 tId is undefined。

根本原因

1. 資料格式錯誤：後端回傳的是字串陣列 ["{id:1,...}", "{id:2,...}"]，非標準 JSON 物件陣列。ZTree 期望每個節點為物件，包含 id、pId、name 等屬性。
2. dataType 設定不符：前端設定 dataType: "json"，jQuery 會嘗試解析，但字串陣列解析後仍為字串陣列，導致 ZTree 遍歷時讀取不到節點屬性。

修正方案

後端修正 (Java/Play)

public static Result getData() {
    List<Map<String, Object>> nodes = new ArrayList<>();
    nodes.add(Map.of("id", 1, "pId", 0, "name", "test1", "open", true));
    nodes.add(Map.of("id", 2, "pId", 1, "name", "test2", "open", true));
    nodes.add(Map.of("id", 3, "pId", 1, "name", "test3", "open", true));
    nodes.add(Map.of("id", 4, "pId", 2, "name", "test4", "open", true));
    return ok(Json.toJson(nodes)); // 直接序列化為 JSON 陣列
}

前端調整

$.ajax({
    url: "/Application/getData",
    dataType: "json", // 保持 json，後端已修正
    success: function(data) {
        // data 已是物件陣列，直接使用
        $.fn.zTree.init($("#treeDemo"), setting, data);
    }
});

關鍵點總結

• 後端務必回傳**標準 JSON 物件陣列**，而非字串化片段。
• 前端 dataType: "json" 讓 jQuery 自動解析，成功回調直接拿到陣列。
• ZTree 設定 simpleData.enable: true 並指定 idKey、pIdKey、rootPId。