jEasyUI 创建 CRUD 数据网格学习笔记
简介
jEasyUI 是一款基于 jQuery 的 UI 插件库，提供了丰富的 UI 控件和易用的 API，适用于 Web 应用程序的开发。其中，数据网格是一个非常关键的控件，用于展示和操作数据。本文将介绍如何使用 jEasyUI 创建一个 CRUD（增删改查）数据网格，并提供实例演示。
准备工作
为了演示方便，我们将使用以下工具：
- jQuery v1.12.4
- jEasyUI v1.9.5
- PHP v7.0.0 或以上版本
- MySQL 数据库 v5.6.0 或以上版本
创建数据表
首先，我们需要在 MySQL 数据库中创建一个用于存储数据的表。以“用户信息”为例，可以创建如下表：
sqlCopy CodeCREATE TABLE `users` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(50) NOT NULL,
`gender` varchar(10) NOT NULL,
`age` int(11) NOT NULL,
`email` varchar(50) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
创建后端接口
接着，我们需要编写一个后端接口文件，用于响应 jEasyUI 数据网格的请求。以 PHP 为例，可以创建如下接口文件：
phpCopy Code<?php
header('Content-Type: application/json');
$mysqli = new mysqli('localhost', 'root', 'password', 'test');
if ($mysqli->connect_errno) {
echo json_encode(array('code' => 500, 'msg' => '数据库连接失败'));
exit;
}
$page = isset($_POST['page']) ? $_POST['page'] : 1;
$rows = isset($_POST['rows']) ? $_POST['rows'] : 10;
$offset = ($page - 1) * $rows;
$result = $mysqli->query("SELECT COUNT(*) AS total FROM users");
$row = $result->fetch_assoc();
$total = $row['total'];
$result = $mysqli->query("SELECT * FROM users LIMIT $offset, $rows");
$data = array();
while ($row = $result->fetch_assoc()) {
$data[] = $row;
}
echo json_encode(array(
'total' => $total,
'rows' => $data,
));
$mysqli->close();
该接口文件实现了读取用户信息的功能，接收两个参数：page 和 rows，分别表示当前页码和每页显示行数。接口将返回一个 JSON 格式的数据，其中total 表示总记录数，rows 表示本页的记录列表。
创建前端页面
最后，我们需要创建一个 HTML 页面，用于展示 jEasyUI 数据网格并与后端接口交互。可以创建如下页面：
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jEasyUI 创建 CRUD 数据网格学习笔记</title>
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.9.5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.9.5/themes/icon.css">
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.9.5/jquery.easyui.min.js"></script>
<script type="text/javascript">
$(function() {
$('#dg').datagrid({
url: 'api.php',
method: 'post',
fit: true,
pagination: true,
singleSelect: true,
columns: [[
{field:'name',title:'姓名',width:100},
{field:'gender',title:'性别',width:50},
{field:'age',title:'年龄',width:50},
{field:'email',title:'邮箱',width:150},
]],
toolbar: [{
text: '新增',
iconCls: 'icon-add',
handler: function() {
$('#dlg').dialog('open');
$('#fm').form('clear');
$('#fm').attr('action', 'save.php');
}
}, '-', {
text: '编辑',
iconCls: 'icon-edit',
handler: function() {
var row = $('#dg').datagrid('getSelected');
if (row) {
$('#dlg').dialog('open');
$('#fm').form('load', row);
$('#fm').attr('action', 'update.php?id=' + row.id);
} else {
$.messager.alert('提示', '请先选择一行记录', 'info');
}
}
}, '-', {
text: '删除',
iconCls: 'icon-remove',
handler: function() {
var row = $('#dg').datagrid('getSelected');
if (row) {
$.messager.confirm('确认', '确认删除此记录吗？', function(r) {
if (r) {
$.post('delete.php', {id: row.id}, function(result) {
if (result.code == 200) {
$('#dg').datagrid('reload');
} else {
$.messager.alert('提示', result.msg, 'error');
}
}, 'json');
}
});
} else {
$.messager.alert('提示', '请先选择一行记录', 'info');
}
}
}]
});
$('#dlg').dialog({
width: 400,
height: 300,
closed: true,
resizable: true,
modal: true,
buttons: [{
text: '保存',
iconCls: 'icon-save',
handler: function() {
$('#fm').form('submit', {
onSubmit: function() {
return $(this).form('validate');
},
success: function(result) {
var result = JSON.parse(result);
if (result.code == 200) {
$('#dlg').dialog('close');
$('#dg').datagrid('reload');
} else {
$.messager.alert('提示', result.msg, 'error');
}
}
});
}
}, {
text: '取消',
iconCls: 'icon-cancel',
handler: function() {
$('#dlg').dialog('close');
}
}]
});
});
</script>
</head>
<body>
<table id="dg"></table>
<div id="dlg" class="easyui-dialog">
<div class="easyui-layout" style="width: 100%; height: 100%;">
<form id="fm" method="post">
<div class="fitem">
<label>姓名：</label>
<input name="name" class="easyui-validatebox" required="true">
</div>
<div class="fitem">
<label>性别：</label>
<select name="gender" class="easyui-combobox" required="true">
<option value="男">男</option>
<option value="女">女</option>
</select>
</div>
<div class="fitem">
<label>年龄：</label>
<input name="age" class="easyui-numberbox" required="true">
</div>
<div class="fitem">
<label>邮箱：</label>
<input name="email" class="easyui-validatebox" required="true" validType="email">
</div>
</form>
</div>
</div>
</body>
</html>
该页面使用了 jEasyUI 的数据网格控件 datagrid，并绑定了相关的事件响应函数。页面中包含一个弹出对话框 dialog，用于新增或编辑记录，以及一个工具栏 toolbar，用于触发相应的操作。form 表单用于提交记录，并使用 validatebox、combobox 和 numberbox 等组件进行输入验证。
实例演示
为了演示方便，可以下载以下 ZIP 文件并解压缩到 Web 服务器根目录下：
然后在浏览器中访问 http://localhost/jEasyUI/，即可查看实例演示。在演示页面中，可以进行如下操作：
- 点击“新增”按钮，在弹出对话框中输入记录信息并保存；
- 点击“编辑”按钮，选择一行记录后在弹出对话框中修改记录信息并保存；
- 点击“删除”按钮，选择一行记录后确认删除。