您现在的位置：程式碼之家 >> 編程語言 > >> 更多程式語言 >> 程式設計綜合問答

EasyUI DataGrid 數據不顯示？後端 JSON 格式錯誤排查全記錄

編輯：程式設計綜合問答

問題現象

前端 EasyUI DataGrid 配置正確，後端返回數據，但表格無數據顯示。直接在 JSP 中定義 var dataGrid = {...} 卻能正常顯示。

根因定位

後端序列化方式錯誤：使用 JSONArray.fromObject(List<String>) 將已包含完整 JSON 結構的字符串再次序列化，導致雙重編碼，前端解析失敗。

錯誤代碼對比

// ❌ 錯誤：List 中存的是完整 JSON 字符串，再次序列化產生雙重編碼
public List<String> getIPSegFromDB(String ID) {
    StringBuffer sb = new StringBuffer();
    sb.append("{\"total\":28,\"rows\":[");
    sb.append("{\"ID\":\"1\",\"IP\":\"192.168.1.1\",...},");
    sb.append("]}");
    List<String> lstIPs = new ArrayList<>();
    lstIPs.add(sb.toString());
    return lstIPs;
}

// Controller
response.getWriter().print(JSONArray.fromObject(qis.getIPSegFromDB(objectID)).toString());

正確實現方式

// ✅ 正確：構建 Map/POJO，由框架統一序列化
public Map<String, Object> getIPSegFromDB(String ID) {
    List<Map<String, String>> rows = new ArrayList<>();
    Map<String, String> row1 = new HashMap<>();
    row1.put("ID", "1");
    row1.put("IP", "192.168.1.1");
    row1.put("HOSTNAME", "test");
    // ... 其他字段
    rows.add(row1);
    // 添加更多行...
    
    Map<String, Object> result = new HashMap<>();
    result.put("total", rows.size());
    result.put("rows", rows);
    return result;
}

// Controller 直接返回對象（配合 @ResponseBody 或 JSON 插件）
return getIPSegFromDB(objectID);

EasyUI DataGrid 要求的標準 JSON 格式

{
  "total": 28,
  "rows": [
    {"ID":"1","IP":"192.168.1.1","HOSTNAME":"test","GATEWAY":"192.168.1.254","USEFOR":"測試","PROPOSER":"11","CREATEDATE":"2015-11-21"},
    {"ID":"2","IP":"192.168.1.2","HOSTNAME":"test","GATEWAY":"192.168.1.254","USEFOR":"測試","PROPOSER":"111","CREATEDATE":"2015-11-21"}
  ]
}