EasyUI 刷新頁面樣式錯亂？jQuery 版本衝突是元兇

現象描述

EasyUI 頁面首次載入正常，但按 F5 刷新後，DataGrid、Tree、Tabs 等組件樣式全亂：邊框消失、圖標錯位、佈局塌陷。

排查過程

1. 檢查 CSS/JS 引用順序：easyui.css → icon.css → jquery.min.js → jquery.easyui.min.js，順序無誤。
2. 檢查瀏覽器控制台：無 JS 報錯，CSS 正常載入（200 OK）。
3. 嘗試清除瀏覽器快取、無痕模式：問題依舊。

根因定位：jQuery 版本不相容

專案原引用 jQuery 1.8.x，EasyUI 官方文檔建議搭配 1.7.x / 1.9.x / 1.11.x 等特定主版本。1.8 版本內部對某些選取器、事件處理有細微變更，導致 EasyUI 核心邏輯（如 `$.parser.parse`）在頁面重載時機判斷異常，進而漏解析部分組件。

解決方案

<!-- 降級至 1.7.2 或升級至 1.11.3 / 3.x (需確認 EasyUI 版本相容) -->
<script src="jquery-1.7.2.min.js"></script>
<script src="jquery.easyui.min.js"></script>

將 jQuery 替換為 **1.7.2** 後，刷新頁面樣式恢復正常。

最佳實踐建議

• 查閱所用 EasyUI 版本的 README 或官網，確認推薦 jQuery 版本區間。
• 專案鎖定 jQuery 版本（`package.json` / `bower.json` / 手動管理），避免 `npm update` 等操作意外升級破壞相容性。
• 若必須使用高版本 jQuery，考慮升級 EasyUI 至對應支援版本，或引入 jQuery Migrate 兼容插件（僅作過渡）。

總結

EasyUI 對 jQuery 版本敏感，「首載正常、刷新亂碼」是典型版本衝突特徵。鎖定官方推薦的 jQuery 版本，是維持穩定的最低成本方案。