jQuery EasyUI 应用：创建 CRUD 数据网格

在构建后台管理系统时，数据表格的内联编辑是常见需求。本文基于 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 获取，包含前端页面与后端脚本的完整结构。