一、jQuery EasyUI 簡介
jQuery EasyUI 是一套基于 jQuery 的用戶界面框架，提供了豐富的 UI 組件，如數據表格、樹形結構、窗體、對話框等，適用于快速開發后臺管理系統和 Web 應用界面。它封裝了大量常用功能，使用簡單，開發效率高。
二、安裝方式
2.1 使用 CDN 引入（推薦）
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script><!-- EasyUI 樣式 -->
<link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/icon.css"><!-- EasyUI 腳本 -->
<script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
2.2 本地安裝方式
- 訪問官網：https://www.jeasyui.com/
- 下載 EasyUI 最新版本壓縮包
- 解壓后將
themes/、jquery.easyui.min.js、locale/等文件放入項目中 - 在 HTML 中引入：
<link rel="stylesheet" href="themes/default/easyui.css">
<link rel="stylesheet" href="themes/icon.css">
<script src="jquery.min.js"></script>
<script src="jquery.easyui.min.js"></script>
三、常用組件示例
3.1 表格（DataGrid）
<table id="dg" class="easyui-datagrid" style="width:600px;height:250px"data-options="url:'data.json',method:'get',singleSelect:true"><thead><tr><th data-options="field:'id',width:80">編號</th><th data-options="field:'name',width:120">姓名</th><th data-options="field:'email',width:180">郵箱</th></tr></thead>
</table>
3.2 對話框（Dialog）
<div id="dlg" class="easyui-dialog" title="提示" style="width:300px;height:150px"data-options="modal:true,closed:true"><p>這是一個對話框。</p>
</div><script>$(function(){$('#dlg').dialog('open');});
</script>
3.3 樹形菜單（Tree）
<ul id="tt" class="easyui-tree" data-options="url:'tree_data.json',method:'get'"></ul>
四、表單組件示例
<form id="ff" method="post"><div><input class="easyui-textbox" name="username" prompt="用戶名" style="width:200px"></div><div><input class="easyui-passwordbox" name="password" prompt="密碼" style="width:200px"></div><div><a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">提交</a></div>
</form><script>function submitForm(){$('#ff').form('submit',{url:'login.php',onSubmit:function(){return $(this).form('validate');},success:function(data){alert(data);}});}
</script>
五、主題與美化
可更換不同主題，只需替換 CSS 引用地址：
<link rel="stylesheet" href="themes/metro/easyui.css">
也可使用 ThemeBuilder 工具自定義主題：https://www.jeasyui.com/themebuilder/
六、常見問題
Q1: 樣式失效？
- 檢查是否正確引入
easyui.css和icon.css - 注意先引入 jQuery，再引入 EasyUI
Q2: DataGrid 數據加載失敗？
- 檢查
url是否返回正確 JSON 格式 - 確保服務端響應類型為
application/json
七、學習資源推薦
- EasyUI 官方網站
- EasyUI 中文手冊
- 菜鳥教程 EasyUI
本文由“小奇Java面試”原創發布，轉載請注明出處。
可以搜索【小奇JAVA面試】第一時間閱讀，回復【資料】獲取福利，回復【項目】獲取項目源碼，回復【簡歷模板】獲取簡歷模板，回復【學習路線圖】獲取學習路線圖。
