jQuery EasyUI 应用 – 创建 CRUD 应用

jQuery EasyUI 应用 – 创建 CRUD 应用

数据收集并妥善管理数据是网络应用常见的必要功能。CRUD（Create 创建、Read 读取、Update 更新、Delete 删除）允许我们生成页面来列表显示并编辑数据库记录。本教程将演示如何使用 jQuery EasyUI 框架实现一个基本的 CRUD DataGrid 应用。

我们将使用以下 EasyUI 插件：

• datagrid：显示列表数据。
• dialog：用于创建或编辑单条记录的弹窗表单。
• messager：显示提示信息。

步骤 1: 引入 EasyUI 资源

在 HTML 页面头部引入 jQuery 和 EasyUI 的 CSS/JS 文件（推荐使用最新版本，可从官网 https://www.jeasyui.com 下载或 CDN）：

<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>

步骤 2: 创建 DataGrid 和工具栏

定义 DataGrid 来加载数据（假设后端 PHP 文件 get_users.php 返回 JSON 数据）：

<table id="dg" title="My Users" class="easyui-datagrid" style="width:700px;height:400px"
       url="get_users.php"
       toolbar="#toolbar" pagination="true"
       rownumbers="true" fitColumns="true" singleSelect="true">
    <thead>
        <tr>
            <th field="firstname" width="50">First Name</th>
            <th field="lastname" width="50">Last Name</th>
            <th field="phone" width="50">Phone</th>
            <th field="email" width="80">Email</th>
        </tr>
    </thead>
</table>

<div id="toolbar">
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">Remove User</a>
</div>

步骤 3: 创建编辑对话框（Dialog）

同一个对话框用于新增和编辑：

<div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
     closed="true" buttons="#dlg-buttons">
    <div class="ftitle">User Information</div>
    <form id="fm" method="post" novalidate>
        <div class="fitem">
            <label>First Name:</label>
            <input name="firstname" class="easyui-textbox" required="true">
        </div>
        <div class="fitem">
            <label>Last Name:</label>
            <input name="lastname" class="easyui-textbox" required="true">
        </div>
        <div class="fitem">
            <label>Phone:</label>
            <input name="phone" class="easyui-textbox">
        </div>
        <div class="fitem">
            <label>Email:</label>
            <input name="email" class="easyui-textbox" validType="email">
        </div>
    </form>
</div>

<div id="dlg-buttons">
    <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveUser()" style="width:90px">Save</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">Cancel</a>
</div>

步骤 4: JavaScript 实现 CRUD 操作

<script type="text/javascript">
    var url;

    function newUser(){
        $('#dlg').dialog('open').dialog('setTitle','New User');
        $('#fm').form('clear');
        url = 'save_user.php';  // 新增处理接口
    }

    function editUser(){
        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;  // 更新处理接口，带 ID
        } else {
            $.messager.alert('提示','请先选择一行！');
        }
    }

    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');
                    $('#dg').datagrid('reload');  // 刷新数据网格
                }
            }
        });
    }

    function destroyUser(){
        var row = $('#dg').datagrid('getSelected');
        if (row){
            $.messager.confirm('Confirm','确定删除此用户吗？',function(r){
                if (r){
                    $.post('remove_user.php',{id:row.id},function(result){
                        if (result.success){
                            $('#dg').datagrid('reload');
                        } else {
                            $.messager.show({title: 'Error', msg: result.errorMsg});
                        }
                    },'json');
                }
            });
        }
    }
</script>

后端示例（PHP + MySQL）

• get_users.php：返回 { "rows": [...], "total": count } 格式的 JSON（支持分页）。
• save_user.php、update_user.php、remove_user.php：处理插入、更新、删除，并返回 JSON 如 { "success": true } 或错误信息。

这个示例实现了基本的 CRUD 功能：新增/编辑使用弹窗表单，删除带确认，操作成功后自动刷新表格。

更多高级用法（如行内编辑、展开行详情编辑、搜索分页），可参考官方教程：

• https://www.jeasyui.com/tutorial/app/crud.php
• https://www.jeasyui.com/tutorial/app/crud2.php (行内编辑 CRUD DataGrid)

如果需要完整源码或特定后端实现，请提供更多细节！