jQuery EasyUI 应用 - 创建 CRUD 应用
jQuery EasyUI 应用 - 创建 CRUD 应用
简介
jQuery EasyUI 是基于 jQuery 的 UI 库,支持常见的 UI 组件以及简单的数据处理。其中,CRUD(增删改查)操作是每个Web应用程序的基础,本文将介绍如何通过 jQuery EasyUI 来创建一个简单的 CRUD 应用。
准备工作
在开始创建 CRUD 应用之前,我们需要确保已经包含了 jQuery 和 jQuery EasyUI 的库文件。可以通过以下链接获取:
在 HTML 页面中添加以下代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CRUD Application</title>
<link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="themes/icon.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.easyui.min.js"></script>
</head>
<body>
<!-- YOUR CODE HERE -->
</body>
</html>
创建表格
首先,我们需要创建一个表格来显示数据。可以使用以下代码创建一个简单的表格:
<table id="dg" title="用户列表" class="easyui-datagrid" style="width:700px;height:250px"
url="get_users.php" toolbar="#toolbar" pagination="true" rownumbers="true" fitColumns="true">
<thead>
<tr>
<th field="id" width="50">ID</th>
<th field="name" width="50">Name</th>
<th field="email" width="50">Email</th>
<th field="phone" width="50">Phone</th>
<th field="address" width="50">Address</th>
</tr>
</thead>
</table>
其中,id、name、email、phone、address 为表格中的列名,width 表示列宽。
在表格中,我们设置了以下属性:
- title:表格标题
- class:表格样式
- url:获取数据的地址
- toolbar:工具栏
- pagination:分页
- rownumbers:行号
- fitColumns:自适应列宽
添加工具栏和操作按钮
我们需要在表格上方添加一个工具栏,以方便用户进行 CRUD 操作。可以使用以下代码添加工具栏:
<div id="toolbar">
<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">新增用户</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">编辑用户</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">删除用户</a>
</div>
- iconCls:图标样式
- plain:是否使用平面样式
其中,通过 onclick 函数来触发相关操作。
定义 CRUD 操作
接下来,我们需要定义 CRUD 操作的相关函数。
新增用户
function newUser() {
$('#dlg').dialog('open').dialog('center').dialog('setTitle', '新增用户');
$('#fm').form('clear');
url = 'save_user.php';
}
这个函数会弹出一个模态对话框,用户可以在对话框中输入新增用户的信息。可以使用以下代码来定义对话框:
<div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
closed="true" buttons="#dlg-buttons">
<div class="ftitle">用户信息</div>
<form id="fm" method="post" novalidate>
<div class="fitem">
<label>姓名:</label>
<input name="name" class="easyui-textbox" required="true">
</div>
<div class="fitem">
<label>邮箱:</label>
<input name="email" class="easyui-textbox" required="true">
</div>
<div class="fitem">
<label>电话:</label>
<input name="phone" class="easyui-textbox" required="true">
</div>
<div class="fitem">
<label>地址:</label>
<input name="address" class="easyui-textbox" required="true">
</div>
</form>
</div>
编辑用户
function editUser() {
var row = $('#dg').datagrid('getSelected');
if (row) {
$('#dlg').dialog('open').dialog('center').dialog('setTitle', 'Edit User');
$('#fm').form('load', row);
url = 'update_user.php?id=' + row.id;
}
}
这个函数会弹出一个模态对话框,用户可以在对话框中修改用户的信息。并将用户的 ID 作为参数传递到 update_user.php 页面。可以使用以下代码来定义对话框:
<div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
closed="true" buttons="#dlg-buttons">
<div class="ftitle">Edit User</div>
<form id="fm" method="post" novalidate>
<div class="fitem">
<label>Name:</label>
<input name="name" class="easyui-textbox" required="true">
</div>
<div class="fitem">
<label>Email:</label>
<input name="email" class="easyui-textbox" required="true">
</div>
<div class="fitem">
<label>Phone:</label>
<input name="phone" class="easyui-textbox" required="true">
</div>
<div class="fitem">
<label>Address:</label>
<input name="address" class="easyui-textbox" required="true">
</div>
</form>
</div>
删除用户
function destroyUser() {
var row = $('#dg').datagrid('getSelected');
if (row) {
$.messager.confirm('Confirm', 'Are you sure you want to delete this user?', function (r) {
if (r) {
$.post('destroy_user.php', {id: row.id}, function (result) {
if (result.success) {
$('#dg').datagrid('reload');
} else {
$.messager.show({
title: 'Error',
msg: result.msg
});
}
}, 'json');
}
});
}
}
保存用户
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: 'Error',
msg: result.msg
});
}
}
});
}
这个函数会将用户输入的信息作为参数,发送到 save_user.php 页面,并在保存成功后刷新表格。
完整代码
以上就是创建 CRUD 应用的全部步骤。以下是完整的代码供参考:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CRUD Application</title>
<link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="themes/icon.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.easyui.min.js"></script>
</head>
<body>
<table id="dg" title="用户列表" class="easyui-datagrid" style="width:700px;height:250px"
url="get_users.php" toolbar="#toolbar" pagination="true" rownumbers="true" fitColumns="true">
<thead>
<tr>
<th field="id" width="50">ID</th>
<th field="name" width="50">Name</th>
<th field="email" width="50">Email</th>
<th field="phone" width="50">Phone</th>
<th field="address" width="50">Address</th>
</tr>
</thead>
</table>
<div id="toolbar">
<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">新增用户</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">编辑用户</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">删除用户</a>
</div>
<div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
closed="true" buttons="#dlg-buttons">
<div class="ftitle">用户信息</div>
<form id="fm" method="post" novalidate>
<div class="fitem">
<label>姓名:</label>
<input name="name" class="easyui-textbox" required="true">
</div>
<div class="fitem">
<label>邮箱:</label>
<input name="email" class="easyui-textbox" required="true">
</div>
<div class="fitem">
<label>电话:</label>
<input name="phone" class="easyui-textbox" required="true">
</div>
<div class="fitem">
<label>地址:</label>
<input name="address" class="easyui-textbox" required="true">
</div>
</form>
</div>
<div id="dlg-buttons">
<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">Save</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Cancel</a>
</div>
<script type="text/javascript">
var url;
function newUser() {
$('#dlg').dialog('open').dialog('center').dialog('setTitle', '新增用户');
$('#fm').form('clear');
url = 'save_user.php';
}
function editUser() {
var row = $('#dg').datagrid('getSelected');
if (row) {
$('#dlg').dialog('open').dialog('center').dialog('setTitle', 'Edit User');
$('#fm').form('load', row);
url = 'update_user.php?id=' + row.id;
}
}
function destroyUser() {
var row = $('#dg').datagrid('getSelected');
if (row) {
$.messager.confirm('Confirm', 'Are you sure you want to delete this user?', function (r) {
if (r) {
$.post('destroy_user.php', {id: row.id}, function (result) {
if (result.success) {
$('#dg').datagrid('reload');
} else {
$.messager.show({
title: 'Error',
msg: result.msg
});
}
}, 'json');
}
});
}
}
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: 'Error',
msg: result.msg
});
}
}
});
}
</script>
</body>
</html>
总结
通过简单的几步,我们就可以使用 jQuery EasyUI 来创建一个简单的 CRUD 应用。借助 EasyUI 提供的丰富组件和 API,我们可以创建更加强大的应用程序。对于具有复杂数据关系的应用,我们可以使用 EasyUI 的树形表格、表单验证等组件,方便实现功能丰富又美观的应用程序。