jQuery EasyUI 创建 CRUD 应用完整教程

在 Web 应用中，数据收集与管理是核心需求。CRUD（增删改查）功能可帮助开发者快速生成数据列表并维护数据库记录。本文将基于 jQuery EasyUI 框架，通过 DataGrid、Dialog、Form 和 Messager 等组件，逐步实现一个完整的用户信息管理应用，并提供可直接运行的前后端代码示例。

准备 MySQL 数据库与数据表

本示例使用 MySQL 存储用户信息。首先创建数据库及 users 表，用于存放用户的基本资料。表结构应包含 id、firstname、lastname、phone 和 email 等字段，以匹配前端展示需求。

注意：示例中使用的 mysql_* 系列函数在 PHP 5.5 起已被废弃，实际项目中建议替换为 PDO 或 MySQLi 扩展，并采用预处理语句防范 SQL 注入。

构建 DataGrid 数据列表

使用 EasyUI 的 datagrid 组件可快速渲染数据表格，无需编写复杂 JavaScript。通过声明式 HTML 属性即可完成数据绑定、工具栏配置和列定义。

    

        

            
First Name
            
Last Name
            
Phone
            
Email
        
    


    New User
    Edit User
    Remove User

表格通过 url 属性指向 get_users.php，自动从服务器拉取 JSON 格式数据并渲染。后端示例代码如下：

$rs = mysql_query('select * from users');
$result = array();
while($row = mysql_fetch_object($rs)){
    array_push($result, $row);
}
echo json_encode($result);

渲染效果如下，用户可直接在列表中查看数据，并通过顶部工具栏触发新增、编辑或删除操作。

创建表单对话框

新增与编辑操作共用同一个对话框组件。通过 dialog 和 form 插件，可快速构建带验证的表单界面。

    
User Information
    

        

            First Name:
            
        
        

            Last Name:
            
        
        

            Phone:
            
        
        

            Email:
            
        
    


    Save
    Cancel

表单字段通过 easyui-validatebox 启用基础验证，required="true" 标记必填项，validType="email" 校验邮箱格式。对话框初始状态为关闭，点击工具栏按钮后动态打开。

实现新增、编辑与保存逻辑

新增用户

点击“New User”时，打开对话框并清空表单内容，同时设置提交目标 URL 为新增接口。

function newUser(){
    $('#dlg').dialog('open').dialog('setTitle','New User');
    $('#fm').form('clear');
    url = 'save_user.php';
}

编辑用户

点击“Edit User”时，获取 DataGrid 当前选中行数据，加载到表单中，并设置更新接口 URL。

var row = $('#dg').datagrid('getSelected');
if (row){
    $('#dlg').dialog('open').dialog('setTitle','Edit User');
    $('#fm').form('load',row);
    url = 'update_user.php?id='+row.id;
}

保存数据

表单提交前触发 onSubmit 验证，验证通过后发送请求。根据返回结果关闭对话框并刷新表格，或显示错误提示。

function saveUser(){
    $('#fm').form('submit',{
        url: url,
        onSubmit: function(){
            return $(this).form('validate');
        },
        success: function(result){
            var result = eval('('+result+')');
            if (result.errorMsg){
                $.messager.show({
                    title: 'Error',
                    msg: result.errorMsg
                });
            } else {
                $('#dlg').dialog('close');        // close the dialog
                $('#dg').datagrid('reload');    // reload the user data
            }
        }
    });
}

后端需返回 JSON 格式响应，成功时返回 {"success":true}，失败时返回 {"errorMsg":"错误信息"}。

删除用户与确认交互

删除操作需先获取选中行，弹出确认对话框防止误删。确认后通过 POST 请求发送用户 ID，成功后刷新列表。

function destroyUser(){
    var row = $('#dg').datagrid('getSelected');
    if (row){
        $.messager.confirm('Confirm','Are you sure you want to destroy this user?',function(r){
            if (r){
                $.post('destroy_user.php',{id:row.id},function(result){
                    if (result.success){
                        $('#dg').datagrid('reload');    // reload the user data
                    } else {
                        $.messager.show({    // show error message
                            title: 'Error',
                            msg: result.errorMsg
                        });
                    }
                },'json');
            }
        });
    }
}

删除接口 destroy_user.php 接收 id 参数，执行删除后返回 JSON 结果。建议在服务端增加权限校验与软删除机制，提升数据安全性。

运行环境与部署说明

完整运行本示例需满足以下条件：

• 启动 MySQL 服务并导入 users 表结构
• 配置 PHP 运行环境（Apache/Nginx + PHP）
• 引入 jQuery 与 jQuery EasyUI 核心库及样式文件
• 将前端 HTML 与后端 PHP 文件部署至同一 Web 目录

部署完成后，在浏览器中访问页面即可体验完整的 CRUD 操作流程。示例代码包可通过官方资源下载获取，便于本地调试与二次开发。