EasyUI Tree 綁定 JSON 無限展開？children 為空仍顯示展開圖示的解決之道

使用 EasyUI Tree 綁定 JSON 資料時，明明節點已無子資料（children 為空陣列或 null），介面卻持續顯示展開圖示（+號），點擊後發送請求導致無限載入。本文解釋原因並給出修正方案。

問題現象

根本原因

EasyUI Tree 判斷節點是否為葉子節點的邏輯：

• 若節點包含 state 屬性且值為 "closed" 或 "open"，視為**父節點**（非葉子），會顯示展開/摺疊圖示並啟用動態載入。
• 若節點**無 state 屬性**，且 children 為空陣列或不存在，視為**葉子節點**，不顯示展開圖示。

提問者的 JSON 雖然 children: []，但後端可能在序列化時仍輸出了 "state": "closed"，導致前端誤判為父節點。

解決方案

1. 後端不輸出 state 屬性（推薦）：葉子節點的 JSON 完全不包含 state 欄位。

   // 葉子節點正確範例
   { "id": 5, "text": "項目五" }
   
   // 父節點正確範例
   { "id": 1, "text": "父節點", "state": "closed", "children": [ ... ] }
   

2. 動態載入模式下，依 id 判斷是否輸出 children：EasyUI 動態載入時會傳遞 id 參數，後端據此查詢子節點；無子節點時返回空陣列 []，**且不包含 state**。
3. 前端格式化資料（若無法改後端）：

   function formatTreeData(rows) {
       return rows.map(function(node) {
           if (!node.children || node.children.length === 0) {
               delete node.state;  // 強制移除 state
           } else if (node.state === undefined) {
               node.state = "closed";
           }
           if (node.children) node.children = formatTreeData(node.children);
           return node;
       });
   }
   $('#tree').tree({ data: formatTreeData(rawData) });
   

常見誤區

「children 為空陣列就會自動變葉子節點」——錯誤。若同時存在 state，state 優先級更高。

驗證步驟

1. 開啟瀏覽器開發者工具 Network 面板，檢視 Tree 請求回應的 JSON。
2. 搜尋葉子節點是否含 "state" 欄位。
3. 修正後端或前端格式化邏輯，重新整理頁面確認展開圖示消失。

遵循「葉子節點無 state、父節點有 state」規則，EasyUI Tree 即可正確渲染，杜絕無限展開問題。