EasyUI 是基於 jQuery 的輕量級 UI 組件庫，提供 DataGrid、Tree、Form、Dialog、Tabs、Menu 等開箱即用組件，適合後台管理系統快速構建。
<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>
| 組件 | HTML 結構 | JS 初始化 | 常用方法 |
|---|---|---|---|
| DataGrid | <table id="dg"></table> | $('#dg').datagrid({url:'getData', columns:[[...]]}) | load(), reload(), getSelected(), appendRow() |
| Tree | <ul id="tt"></ul> | $('#tt').tree({url:'getTreeData'}) | getSelected(), expand(), append() |
| Dialog | <div id="dlg" class="easyui-dialog"></div> | 自動解析或 $('#dlg').dialog('open') | open(), close(), refresh() |
| Form | <form id="ff"></form> | $('#ff').form('load', data) | submit(), validate(), clear() |
{total: 100, rows: [...]} (DataGrid) / [{id:1, text:'Node', children:[...]}] (Tree)；$.ajax 封裝統一錯誤處理、Loading 提示；datagrid('beginEdit', index) → 編輯 → datagrid('endEdit', index) → 後端同步。修改 themes/default/easyui.css 顏色變量，或引入 themes/metro/easyui.css、themes/bootstrap/easyui.css 切換風格。
EasyUI 以「HTML 標記聲明 + 最少 JS 初始化」特性極大降低後台開發門檻。掌握 DataGrid/Tree/Dialog 三大核心組件覆蓋 80% 場景，配合統一後端數據協議即可高效交付。
