jQuery EasyUI 应用 – 创建 CRUD 数据网格（DataGrid）

jQuery EasyUI 应用 – 创建 CRUD 数据网格（DataGrid）

在上一个教程中，我们使用了 dialog 弹窗来实现 CRUD 操作。本教程将展示如何直接在 DataGrid 中实现可编辑的 CRUD 功能，即“行内编辑”（inline editing）模式，用户可以直接点击单元格编辑数据，而无需弹出对话框。

这种方式更紧凑、直观，适合数据列表密集的场景。我们将使用 EasyUI 的 datagrid 内置编辑器（editor）来实现创建（append 新行）、读取（加载数据）、更新（编辑行）和删除（remove 行）操作。

官方教程参考：https://www.jeasyui.com/tutorial/app/crud2.php（Build CRUD DataGrid with jQuery EasyUI）

步骤 1: 引入 EasyUI 资源

使用最新版本的 CDN（截至 2025 年，EasyUI 仍在维护，推荐使用官网 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

在 <th> 中定义 editor 属性来指定每个列的编辑器类型。

<table id="dg" title="My Users" style="width:700px;height:400px"
       toolbar="#toolbar" idField="id" rownumbers="true" fitColumns="true" singleSelect="true">
    <thead>
        <tr>
            <th field="firstname" width="50" editor="{type:'validatebox',options:{required:true}}">First Name</th>
            <th field="lastname" width="50" editor="{type:'validatebox',options:{required:true}}">Last Name</th>
            <th field="phone" width="50" editor="text">Phone</th>
            <th field="email" width="80" editor="{type:'validatebox',options:{validType:'email'}}">Email</th>
        </tr>
    </thead>
</table>

<div id="toolbar">
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="append()">Append Row</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeit()">Remove Row</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="accept()">Accept Changes</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onclick="reject()">Reject Changes</a>
</div>

步骤 3: JavaScript 实现行内 CRUD 操作

<script type="text/javascript">
    var editIndex = undefined;

    function endEditing(){
        if (editIndex == undefined){return true}
        if ($('#dg').datagrid('validateRow', editIndex)){
            $('#dg').datagrid('endEdit', editIndex);
            editIndex = undefined;
            return true;
        } else {
            return false;
        }
    }

    function onClickCell(index, field){
        if (editIndex != index){
            if (endEditing()){
                $('#dg').datagrid('selectRow', index).datagrid('beginEdit', index);
                var ed = $('#dg').datagrid('getEditor', {index:index,field:field});
                if (ed){
                    ($(ed.target).data('textbox') ? $(ed.target).textbox('textbox') : $(ed.target)).focus();
                }
                editIndex = index;
            } else {
                $('#dg').datagrid('selectRow', editIndex);
            }
        }
    }

    function append(){
        if (endEditing()){
            $('#dg').datagrid('appendRow',{});
            editIndex = $('#dg').datagrid('getRows').length-1;
            $('#dg').datagrid('selectRow', editIndex).datagrid('beginEdit', editIndex);
        }
    }

    function removeit(){
        if (editIndex == undefined){return}
        $('#dg').datagrid('cancelEdit', editIndex)
                .datagrid('deleteRow', editIndex);
        editIndex = undefined;
    }

    function accept(){
        if (endEditing()){
            $('#dg').datagrid('acceptChanges');
            // 这里可以提交所有更改到服务器，例如：
            // var rows = $('#dg').datagrid('getChanges');
            // $.post('save_changes.php', {data: JSON.stringify(rows)}, function(result){ ... });
        }
    }

    function reject(){
        $('#dg').datagrid('rejectChanges');
        editIndex = undefined;
    }

    $(function(){
        $('#dg').datagrid({
            onClickCell: onClickCell
        });
    });
</script>

关键说明

• 点击单元格编辑：通过 onClickCell 事件实现点击即编辑。
• 新增行：append() 添加空行并进入编辑模式。
• 删除行：选中行后删除（实际项目中需确认并调用服务器删除）。
• 保存更改：acceptChanges() 确认所有编辑。实际应用中，需要调用 getChanges() 获取修改的行（inserted/updated/deleted），然后 AJAX 提交到后端（如 PHP 的 save_user.php）。
• 后端支持：后端需处理批量保存（例如接收 JSON 数据，进行 insert/update/delete）。

高级扩展

• 服务器端加载数据：添加 url="get_users.php" 支持分页和远程加载。
• 自动保存：在 onAfterEdit 事件中 AJAX 保存单行。
• 另一种方式：使用 edatagrid 扩展（需额外引入 datagrid-editable.js），它内置更多 CRUD 方法，如 $('#dg').edatagrid({saveUrl:'save.php', destroyUrl:'delete.php'});。

更多示例：

• 官方行内编辑 CRUD：https://www.jeasyui.com/tutorial/app/crud2.php
• 展开行编辑：https://www.jeasyui.com/tutorial/app/crud3.php

如果需要结合服务器端 PHP/MySQL 示例、批量保存代码，或其他变体（如搜索+分页），请提供更多细节！