当前位置：首页 > news >正文

jQuery EasyUI 应用 - 创建 CRUD 应用

news 2026/7/9 16:58:10

jQuery EasyUI 应用 - 创建 CRUD 应用

数据收集并妥善管理数据是网络应用常见的必要功能。CRUD（Create 创建、Read 读取、Update 更新、Delete 删除）允许我们生成页面来列表显示并编辑数据库记录。本教程将演示如何使用jQuery EasyUI框架实现一个基本的 CRUD DataGrid 应用。

我们将使用以下 EasyUI 插件：

datagrid：显示列表数据。
dialog：用于创建或编辑单条记录的弹窗表单。
messager：显示提示信息。

步骤 1: 引入 EasyUI 资源

在 HTML 页面头部引入 jQuery 和 EasyUI 的 CSS/JS 文件（推荐使用最新版本，可从官网 https://www.jeasyui.com 下载或 CDN）：

<linkrel="stylesheet"type="text/css"href="https://www.jeasyui.com/easyui/themes/default/easyui.css"><linkrel="stylesheet"type="text/css"href="https://www.jeasyui.com/easyui/themes/icon.css"><scripttype="text/javascript"src="https://code.jquery.com/jquery-1.12.4.min.js"></script><scripttype="text/javascript"src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>

步骤 2: 创建 DataGrid 和工具栏

定义 DataGrid 来加载数据（假设后端 PHP 文件get_users.php返回 JSON 数据）：

<tableid="dg"title="My Users"class="easyui-datagrid"style="width:700px;height:400px"url="get_users.php"toolbar="#toolbar"pagination="true"rownumbers="true"fitColumns="true"singleSelect="true"><thead><tr><thfield="firstname"width="50">First Name</th><thfield="lastname"width="50">Last Name</th><thfield="phone"width="50">Phone</th><thfield="email"width="80">Email</th></tr></thead></table><divid="toolbar"><ahref="javascript:void(0)"class="easyui-linkbutton"iconCls="icon-add"plain="true"onclick="newUser()">New User</a><ahref="javascript:void(0)"class="easyui-linkbutton"iconCls="icon-edit"plain="true"onclick="editUser()">Edit User</a><ahref="javascript:void(0)"class="easyui-linkbutton"iconCls="icon-remove"plain="true"onclick="destroyUser()">Remove User</a></div>

步骤 3: 创建编辑对话框（Dialog）

同一个对话框用于新增和编辑：

<divid="dlg"class="easyui-dialog"style="width:400px;height:280px;padding:10px 20px"closed="true"buttons="#dlg-buttons"><divclass="ftitle">User Information</div><formid="fm"method="post"novalidate><divclass="fitem"><label>First Name:</label><inputname="firstname"class="easyui-textbox"required="true"></div><divclass="fitem"><label>Last Name:</label><inputname="lastname"class="easyui-textbox"required="true"></div><divclass="fitem"><label>Phone:</label><inputname="phone"class="easyui-textbox"></div><divclass="fitem"><label>Email:</label><inputname="email"class="easyui-textbox"validType="email"></div></form></div><divid="dlg-buttons"><ahref="javascript:void(0)"class="easyui-linkbutton c6"iconCls="icon-ok"onclick="saveUser()"style="width:90px">Save</a><ahref="javascript:void(0)"class="easyui-linkbutton"iconCls="icon-cancel"onclick="javascript:$('#dlg').dialog('close')"style="width:90px">Cancel</a></div>

步骤 4: JavaScript 实现 CRUD 操作

<scripttype="text/javascript">varurl;functionnewUser(){$('#dlg').dialog('open').dialog('setTitle','New User');$('#fm').form('clear');url='save_user.php';// 新增处理接口}functioneditUser(){varrow=$('#dg').datagrid('getSelected');if(row){$('#dlg').dialog('open').dialog('setTitle','Edit User');$('#fm').form('load',row);url='update_user.php?id='+row.id;// 更新处理接口，带 ID}else{$.messager.alert('提示','请先选择一行！');}}functionsaveUser(){$('#fm').form('submit',{url:url,onSubmit:function(){return$(this).form('validate');},success:function(result){varresult=eval('('+result+')');if(result.errorMsg){$.messager.show({title:'Error',msg:result.errorMsg});}else{$('#dlg').dialog('close');$('#dg').datagrid('reload');// 刷新数据网格}}});}functiondestroyUser(){varrow=$('#dg').datagrid('getSelected');if(row){$.messager.confirm('Confirm','确定删除此用户吗？',function(r){if(r){$.post('remove_user.php',{id:row.id},function(result){if(result.success){$('#dg').datagrid('reload');}else{$.messager.show({title:'Error',msg:result.errorMsg});}},'json');}});}}</script>

后端示例（PHP + MySQL）

get_users.php：返回{ "rows": [...], "total": count }格式的 JSON（支持分页）。
save_user.php、update_user.php、remove_user.php：处理插入、更新、删除，并返回 JSON 如{ "success": true }或错误信息。

这个示例实现了基本的 CRUD 功能：新增/编辑使用弹窗表单，删除带确认，操作成功后自动刷新表格。

更多高级用法（如行内编辑、展开行详情编辑、搜索分页），可参考官方教程：