在构建后台管理系统时，数据表格的内联编辑是常见需求。本文基于 jQuery EasyUI 的 edatagrid 插件，演示如何通过前端表格定义、JS 配置与 PHP 后端接口对接，实现用户数据的增删改查操作，并提供安全编码建议。
定义数据网格 HTML 结构
使用 HTML 标签声明数据网格，并通过 editor 属性为各列配置内联编辑器。工具栏按钮绑定 edatagrid 的内置方法，实现新增、删除、保存与取消操作。
First Name
Last Name
Phone
Email
关键属性说明：
idField：指定主键字段，用于标识行数据。rownumbers：显示行号列。fitColumns：自动调整列宽以填满容器。singleSelect：限制单选模式。editor：定义列的编辑类型与校验规则，如validatebox支持必填与邮箱格式校验。
初始化 edatagrid 并配置接口
通过 jQuery 初始化 edatagrid，并指定数据加载与操作的 URL 地址。edatagrid 会根据用户操作自动向对应接口发送请求。
$('#dg').edatagrid({
url: 'get_users.php',
saveUrl: 'save_user.php',
updateUrl: 'update_user.php',
destroyUrl: 'destroy_user.php'
});接口职责划分：
url：从服务器检索用户列表数据。saveUrl：提交新增用户数据。updateUrl：提交更新后的用户数据。destroyUrl：提交删除请求。
编写 PHP 后端处理逻辑
后端需接收前端提交的参数，执行数据库操作，并返回 JSON 格式结果。以下示例展示新增、更新与删除的基础实现。
新增用户（save_user.php）
$firstname = $_REQUEST['firstname'];
$lastname = $_REQUEST['lastname'];
$phone = $_REQUEST['phone'];
$email = $_REQUEST['email'];
include 'conn.php';
$sql = "insert into users(firstname,lastname,phone,email) values('$firstname','$lastname','$phone','$email')";
@mysql_query($sql);
echo json_encode(array(
'id' => mysql_insert_id(),
'firstname' => $firstname,
'lastname' => $lastname,
'phone' => $phone,
'email' => $email
));更新用户（update_user.php）
$id = intval($_REQUEST['id']);
$firstname = $_REQUEST['firstname'];
$lastname = $_REQUEST['lastname'];
$phone = $_REQUEST['phone'];
$email = $_REQUEST['email'];
include 'conn.php';
$sql="update users set firstname='$firstname',lastname='$lastname',phone='$phone',email='$email' where id=$id";
@mysql_query($sql);
echo json_encode(array(
'id' => $id,
'firstname' => $firstname,
'lastname' => $lastname,
'phone' => $phone,
'email' => $email
));删除用户（destroy_user.php）
$id = intval($_REQUEST['id']);
include 'conn.php';
$sql = "delete from users where id=$id";
@mysql_query($sql);
echo json_encode(array('success'=>true));安全与兼容性注意事项
示例代码使用了已废弃的 mysql_* 函数，存在 SQL 注入风险且无法在现代 PHP 环境中运行。实际部署时应进行以下调整：
- 使用 PDO 或 MySQLi 扩展替代
mysql_query，并采用预处理语句绑定参数。 - 对输入数据进行严格校验与过滤，避免恶意 SQL 注入。
- 确保后端返回的 JSON 结构与 edatagrid 期望格式一致，新增操作需返回包含
id的完整记录，删除操作需返回{"success": true}。
完整示例项目可通过下载 jeasyui-app-crud2.zip 获取，包含前端页面与后端脚本的完整结构。
