EasyUI TreeGrid 僅顯示一行？JSON 字段拼寫錯誤導致 children 無法識別

使用 jQuery EasyUI TreeGrid 綁定巢狀 JSON 資料時，明明資料包含多層子節點，介面卻僅顯示根節點一行。經排查，原為 JSON 字段 children 拼寫為 childern，導致 TreeGrid 無法識別子節點集合。

問題程式碼片段

// HTML 定義
<table id="test" class="easyui-treegrid" 
       url="data/treegrid_data.json" 
       idField="id" treeField="name">
  <thead>...</thead>
</table>

// JSON 回應（節選）
[{
  "id": 1,
  "kpiName": "系統模版",
  "childern": [   // ❌ 拼寫錯誤：childern
    { "id": 2, "kpiName": "無線接通率" },
    { "id": 3, "kpiName": "RRC建立成功率" }
    // ... 更多子節點
  ]
}]

根本原因

EasyUI TreeGrid 依據 idField 與 treeField 解析樹狀結構，**子節點集合字段名稱必須為 children**（預設），或在初始化時指定 childrenField: "自訂字段名"。若字段名錯誤，TreeGrid 視為無子節點，僅渲染根層。

解決方案

1. 修正 JSON 字段拼寫（推薦）：將 childern 改為 children。

   // 正確 JSON
   [{
     "id": 1,
     "kpiName": "系統模版",
     "children": [   // ✅ 正確拼寫
       { "id": 2, "kpiName": "無線接通率" },
       { "id": 3, "kpiName": "RRC建立成功率" }
     ]
   }]
   

2. 或前端指定 childrenField（若無法改後端）：

   $('#test').treegrid({
       idField: 'id',
       treeField: 'kpiName',
       childrenField: 'childern'  // 指定錯誤字段名
   });
   

完整欄位對照表

除錯技巧

1. 開啟瀏覽器 Network 面板，檢視 treegrid_data.json 實際回應內容。
2. Console 執行 console.log(JSON.stringify(data, null, 2)) 確認字段名。
3. 使用 JSON 格式化工具（如 json.cn）檢視結構，搜尋 children。

一個字母之差，導致整棵樹無法展開。養成對照官方文檔字段名的習慣，可避免此類低級錯誤浪費大量時間。