jQuery EasyUI 框架实现一个 CRUD DataGrid_javaweb jquery easyui crud-优快云博客

本文链接：https://blog.youkuaiyun.com/ancientear/article/details/86802202

本文介绍如何利用jQuery EasyUI框架创建一个CRUDDataGrid应用。通过datagrid展示用户列表，dialog进行用户信息的创建与编辑，form提交数据，messager显示提示信息。文章详细解释了从数据库准备到DataGrid构建的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

创建CRUD应用（ jQuery EasyUI 框架实现一个 CRUD DataGrid）
crud是指在做计算处理时的增加(Create)、读取查询(Retrieve)、更新(Update)和删除(Delete)几个单词的首字母简写。crud主要被用在描述软件系统中数据库或者持久层的基本操作功能。

在这里需要四个插件：
• datagrid：向用户展示列表数据。
• dialog：创建或编辑一条单一的用户信息。
• form：用于提交表单数据。
• messager：显示一些操作信息。

步骤1：准备数据库
可以使用Navicat来存储用户信息，创建数据库和“users”表。

在这里插入图片描述

步骤2：创建 DataGrid 来显示用户信息
创建没有 javascript 代码的 DataGrid。

<table id="dg" title="My Users" class="easyui-datagrid" style="width:550px;height:250px"
		url="get_users.php"
		toolbar="#toolbar"
		rownumbers="true" fitColumns="true" singleSelect="true">
	<thead>
		<tr>
			<th field="firstname" width="50">First Name</th>
			<th field="lastname" width="50">Last Name</th>
			<th field="phone" width="50">Phone</th>
			<th field="email" width="50">Email</th>
		</tr>
	</thead>
</table>
<div id="toolbar">
	<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a>
	<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a>
	<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">Remove User</a>
</div>