核心排查步驟
- 開啟 Firefox 開發者工具 (F12) → **網路 (Network)** 標籤。
- 重新整理頁面，觀察 **紅色 (失敗) 請求**：
- **404 Not Found**：EasyUI JS/CSS/圖片路徑錯誤 (如 `jquery-easyui.min.js` 實際位置與 ``、`` **順序正確** (jQuery → EasyUI CSS → EasyUI JS)。
常見 EasyUI 整合錯誤
| 現象 | 原因 | 解決 |
|---|
| 表格不顯示/排版崩潰 | CSS 未載入或版本不匹配 | 確認 `easyui.css`、`icon.css` 路徑正確，版本與 JS 一致 |
| DataGrid 無資料 | JSON 格式錯誤 (需 `{total: N, rows: [...]}`) | Controller 回傳標準格式，或設定 `loadFilter` 轉換 |
| 主題不生效 | 未引入對應 theme CSS | 引入 `themes/default/easyui.css` 或 `themes/metro/easyui.css` |
| jQuery 版本衝突 | 頁面多次引入 jQuery | 全頁只保留一個 jQuery 引用 (建議 3.6+) |
Maven/Web 專案資源路徑建議
src/main/webapp/
├── resources/
│ ├── easyui/ # 解壓 EasyUI 套件到此
│ │ ├── jquery.min.js
│ │ ├── jquery.easyui.min.js
│ │ ├── themes/
│ │ └── ...
│ └── css/, js/ # 專案自有資源
└── WEB-INF/
└── views/
└── list.jsp
<%-- JSP 引用 --%>
