jQuery EasyUI 创建 CRUD 数据网格教程

本教程演示如何使用 jQuery EasyUI 的 edatagrid 插件构建完整的 CRUD 数据网格。通过前端 HTML 定义、JS 配置与 PHP 后端接口对接，实现用户数据的增删改查操作，并提供安全编码建议。

在构建后台管理系统时，数据表格的内联编辑是常见需求。本文基于 jQuery EasyUI 的 edatagrid 插件，演示如何通过前端表格定义、JS 配置与 PHP 后端接口对接，实现用户数据的增删改查操作，并提供安全编码建议。

定义数据网格 HTML 结构

使用 HTML 标签声明数据网格，并通过 editor 属性为各列配置内联编辑器。工具栏按钮绑定 edatagrid 的内置方法，实现新增、删除、保存与取消操作。


    
        
            First Name
            Last Name
            Phone
            Email
        
    


    New
    Destroy
    Save
    Cancel

关键属性说明：

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 获取，包含前端页面与后端脚本的完整结构。