EasyUI DataGrid 無法顯示 JSON 資料排查指南

問題描述

控制器回傳正確 JSON（含 rows、total），DataGrid 初始化無報錯，但表格無資料，甚至表頭不顯示。

常見原因與檢查步驟

1. 欄位名稱不匹配：JSON 物件屬性（如 product_name）必須與 DataGrid columns 定義的 field 完全一致（區分大小寫）。
2. JSON 格式不符：EasyUI DataGrid 預期格式為 {"total":1,"rows":[...]}，確認無多餘巢狀或缺少 total。
3. CSS/JS 衝突：頁面引入 Bootstrap 或其他框架可能覆蓋 EasyUI 樣式，導致表頭隱藏。檢查 <jsp:include page="../fragments/BootStrapFiles.jsp"/> 是否引入衝突樣式。
4. 容器尺寸：<table id="tt"></table> 若無寬高，DataGrid 可能無法渲染。建議在初始化時指定 width/height 或父容器有明確尺寸。
5. 版本差異：EasyUI 1.3+ 版本對 JSON 格式要求較嚴，確認引用版本與文件一致。

除錯建議

// 1. 瀏覽器開發者工具 Network 面板確認回應 JSON 結構
// 2. Console 執行 $('#tt').datagrid('getData') 檢查內部資料
// 3. 暫時移除 Bootstrap 引用測試是否為樣式衝突
// 4. 簡化 columns 只保留一個欄位測試

修正範例

$('#tt').datagrid({
    url: '/store/saleout/getjson',
    method: 'POST',
    fitColumns: true,
    singleSelect: true,
    columns: [[
        {field: 'product_name', title: '產品名稱', width: 100},
        {field: 'numbers', title: '數量', width: 80, align: 'right'},
        {field: 'price', title: '價格', width: 80, align: 'right'},
        {field: 'buyer', title: '買方', width: 100}
    ]],
    onLoadError: function() {
        console.error('DataGrid 載入失敗');
    }
});

關鍵提醒

• 若表頭都不顯示，極大機率是 CSS 衝突（Bootstrap 的 table 樣式常覆蓋 EasyUI）。
• 確認 JSON 回傳的 Content-Type 為 application/json; charset=utf-8。