jQuery EasyUI 应用 - 创建 CRUD 数据网格（DataGrid）-程序员充电站

jQuery EasyUI 应用 - 创建 CRUD 数据网格（DataGrid）

在上一个教程中，我们使用了dialog弹窗来实现 CRUD 操作。本教程将展示如何直接在DataGrid中实现可编辑的 CRUD 功能，即“行内编辑”（inline editing）模式，用户可以直接点击单元格编辑数据，而无需弹出对话框。

这种方式更紧凑、直观，适合数据列表密集的场景。我们将使用 EasyUI 的datagrid内置编辑器（editor）来实现创建（append 新行）、读取（加载数据）、更新（编辑行）和删除（remove 行）操作。

官方教程参考：https://www.jeasyui.com/tutorial/app/crud2.php（Build CRUD DataGrid with jQuery EasyUI）

步骤 1: 引入 EasyUI 资源

使用最新版本的 CDN（截至 2025 年，EasyUI 仍在维护，推荐使用官网 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

在<th>中定义editor属性来指定每个列的编辑器类型。

<tableid="dg"title="My Users"style="width:700px;height:400px"toolbar="#toolbar"idField="id"rownumbers="true"fitColumns="true"singleSelect="true"><thead><tr><thfield="firstname"width="50"editor="{type:'validatebox',options:{required:true}}">First Name</th><thfield="lastname"width="50"editor="{type:'validatebox',options:{required:true}}">Last Name</th><thfield="phone"width="50"editor="text">Phone</th><thfield="email"width="80"editor="{type:'validatebox',options:{validType:'email'}}">Email</th></tr></thead></table><divid="toolbar"><ahref="javascript:void(0)"class="easyui-linkbutton"iconCls="icon-add"plain="true"onclick="append()">Append Row</a><ahref="javascript:void(0)"class="easyui-linkbutton"iconCls="icon-remove"plain="true"onclick="removeit()">Remove Row</a><ahref="javascript:void(0)"class="easyui-linkbutton"iconCls="icon-save"plain="true"onclick="accept()">Accept Changes</a><ahref="javascript:void(0)"class="easyui-linkbutton"iconCls="icon-undo"plain="true"onclick="reject()">Reject Changes</a></div>

步骤 3: JavaScript 实现行内 CRUD 操作

<scripttype="text/javascript">vareditIndex=undefined;functionendEditing(){if(editIndex==undefined){returntrue}if($('#dg').datagrid('validateRow',editIndex)){$('#dg').datagrid('endEdit',editIndex);editIndex=undefined;returntrue;}else{returnfalse;}}functiononClickCell(index,field){if(editIndex!=index){if(endEditing()){$('#dg').datagrid('selectRow',index).datagrid('beginEdit',index);vared=$('#dg').datagrid('getEditor',{index:index,field:field});if(ed){($(ed.target).data('textbox')?$(ed.target).textbox('textbox'):$(ed.target)).focus();}editIndex=index;}else{$('#dg').datagrid('selectRow',editIndex);}}}functionappend(){if(endEditing()){$('#dg').datagrid('appendRow',{});editIndex=$('#dg').datagrid('getRows').length-1;$('#dg').datagrid('selectRow',editIndex).datagrid('beginEdit',editIndex);}}functionremoveit(){if(editIndex==undefined){return}$('#dg').datagrid('cancelEdit',editIndex).datagrid('deleteRow',editIndex);editIndex=undefined;}functionaccept(){if(endEditing()){$('#dg').datagrid('acceptChanges');// 这里可以提交所有更改到服务器，例如：// var rows = $('#dg').datagrid('getChanges');// $.post('save_changes.php', {data: JSON.stringify(rows)}, function(result){ ... });}}functionreject(){$('#dg').datagrid('rejectChanges');editIndex=undefined;}$(function(){$('#dg').datagrid({onClickCell:onClickCell});});</script>

关键说明

点击单元格编辑：通过onClickCell事件实现点击即编辑。
新增行：append()添加空行并进入编辑模式。
删除行：选中行后删除（实际项目中需确认并调用服务器删除）。
保存更改：acceptChanges()确认所有编辑。实际应用中，需要调用getChanges()获取修改的行（inserted/updated/deleted），然后 AJAX 提交到后端（如 PHP 的save_user.php）。
后端支持：后端需处理批量保存（例如接收 JSON 数据，进行 insert/update/delete）。

高级扩展

服务器端加载数据：添加url="get_users.php"支持分页和远程加载。
自动保存：在onAfterEdit事件中 AJAX 保存单行。
另一种方式：使用edatagrid扩展（需额外引入 datagrid-editable.js），它内置更多 CRUD 方法，如$('#dg').edatagrid({saveUrl:'save.php', destroyUrl:'delete.php'});。

更多示例：