jEasyUI 参考手册学习笔记
1. 概述
jEasyUI 是一个基于 jQuery 的开源 UI 库，提供了丰富的 UI 组件和插件，可以帮助开发人员快速构建美观、易用的 Web 界面。jEasyUI 支持多种主题，可以轻松应用到各种 Web 应用程序中。
2. 安装
2.1 下载
jEasyUI 的下载地址为：https://www.jeasyui.com/download/
可以根据需要选择 Full 或 Lite 版本下载。
2.2 引入 CSS 和 JS 文件
在 HTML 文件中引入 jEasyUI 的 CSS 和 JS 文件：
htmlCopy Code<link rel="stylesheet" type="text/css" href="jeasyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jeasyui/themes/icon.css">
<script type="text/javascript" src="jeasyui/jquery.min.js"></script>
<script type="text/javascript" src="jeasyui/jquery.easyui.min.js"></script>
注意：以上文件路径根据实际情况进行修改。
3. 常用组件
3.1 DataGrid
DataGrid 是 jEasyUI 中最常用的组件之一，用于展示数据。
htmlCopy Code<table id="dg" class="easyui-datagrid" style="width:100%;height:400px"
url="getData.php"
title="用户列表"
toolbar="#toolbar"
rownumbers="true"
pagination="true"
singleSelect="true">
<thead>
<tr>
<th field="id" width="50" sortable="true">ID</th>
<th field="name" width="50" sortable="true">用户名</th>
<th field="email" width="50">邮箱</th>
<th field="age" width="50" sortable="true">年龄</th>
</tr>
</thead>
</table>
<div id="toolbar">
<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">新增用户</a>
</div>
<script>
$('#dg').datagrid();
function newUser() {
// 新增用户代码
}
</script>
以上代码定义了一个 DataGrid，它从 getData.php 获取数据，并展示在表格中。同时，还定义了一个工具栏，包含一个“新增用户”按钮。
3.2 Dialog
Dialog 用于弹出对话框，可以用来展示消息、表单等内容。
htmlCopy Code<div id="dlg" class="easyui-dialog" style="width:400px;height:200px;padding:10px 20px"
closed="true" buttons="#dlg-buttons">
<div class="ftitle">用户信息</div>
<form id="fm" method="post">
<div class="fitem">
<label>用户名:</label>
<input name="name" class="easyui-validatebox" required="true">
</div>
<div class="fitem">
<label>Email:</label>
<input name="email" class="easyui-validatebox" validType="email">
</div>
<div class="fitem">
<label>年龄:</label>
<input name="age" class="easyui-numberbox">
</div>
</form>
</div>
<div id="dlg-buttons">
<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">保存</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="$('#dlg').dialog('close')">取消</a>
</div>
<script>
function newUser() {
$('#dlg').dialog('setTitle', '新增用户').dialog('open');
$('#fm').form('clear');
url = 'saveUser.php';
}
function saveUser() {
$('#fm').form('submit', {
url: url,
onSubmit: function () {
return $(this).form('validate');
},
success: function (result) {
var result = eval('(' + result + ')');
if (result.success) {
$('#dlg').dialog('close');
$('#dg').datagrid('reload');
} else {
$.messager.show({
title: '错误',
msg: result.msg
});
}
}
});
}
</script>
以上代码定义了一个 Dialog，包含一个表单和两个按钮：“保存”和“取消”。点击“新增用户”按钮，会弹出该对话框。在该对话框中输入用户信息后，点击“保存”按钮可以将数据提交到 saveUser.php 进行保存。
3.3 Tree
Tree 用于展示树形结构的数据。
htmlCopy Code<ul id="tt" class="easyui-tree" data-options="url:'getTreeData.php',method:'get',animate:true"></ul>
以上代码定义了一个 Tree，它从 getTreeData.php 获取数据，并展示在页面上。
4. 总结
jEasyUI 提供了丰富的 UI 组件和插件，可以帮助开发人员快速构建美观、易用的 Web 界面。本文介绍了 jEasyUI 中常用的三个组件：DataGrid、Dialog 和 Tree。在实际开发中，可以根据需要选择合适的组件进行使用。