一、jQuery EasyUI 简介
jQuery EasyUI 是一套基于 jQuery 的用户界面框架,提供了丰富的 UI 组件,如数据表格、树形结构、窗体、对话框等,适用于快速开发后台管理系统和 Web 应用界面。它封装了大量常用功能,使用简单,开发效率高。
二、安装方式
2.1 使用 CDN 引入(推荐)
html
<!-- 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 中引入:
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)
html
<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)
html
<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)
html
<ul id="tt" class="easyui-tree" data-options="url:'tree_data.json',method:'get'"></ul>
四、表单组件示例
html
<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 引用地址:
html
<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
七、学习资源推荐
本文由"小奇Java面试"原创发布,转载请注明出处。
可以搜索【小奇JAVA面试】第一时间阅读,回复【资料】获取福利,回复【项目】获取项目源码,回复【简历模板】获取简历模板,回复【学习路线图】获取学习路线图。
