jQuery EasyUI 扩展 – 可编辑的数据网格（保姆级教程）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言

在现代 Web 开发中，数据展示与交互是核心需求之一。数据网格（Data Grid）作为前端展示表格数据的重要工具，其功能扩展直接影响用户体验与开发效率。jQuery EasyUI 是一个广受欢迎的开源框架，它提供了丰富的 UI 组件，其中数据网格（datagrid）更是其核心功能之一。然而，默认的数据网格仅支持基础的数据显示，若想实现动态编辑、实时交互等高级需求，就需要通过扩展功能来增强其能力。本文将从基础概念出发，结合实际案例，深入讲解如何通过 jQuery EasyUI 实现可编辑的数据网格，并提供代码示例与最佳实践。

什么是 jQuery EasyUI 数据网格？

jQuery EasyUI 的数据网格（datagrid）是一个基于表格的 UI 组件，用于展示大量结构化数据。它支持分页、排序、过滤、列拖拽、行选择等功能，能够满足大多数 Web 应用的数据展示需求。

核心组件：

• 列定义（Columns）：定义表格的列结构，包括标题、宽度、对齐方式等。
• 数据源（Data Source）：通过本地数组或远程接口加载数据。
• 事件（Events）：如 onLoadSuccess（数据加载成功时触发）、onClickRow（点击行时触发）等。

类比理解：
可以将数据网格想象成一个“智能表格”，它不仅具备 Excel 的基础功能，还能通过代码灵活配置交互逻辑，例如点击单元格直接编辑内容，或者双击行弹出表单进行详细修改。

可编辑数据网格的核心功能

可编辑的数据网格允许用户直接在表格中修改数据，而无需跳转到单独的编辑页面。这一功能通过以下方式实现：

1. 单元格编辑（Cell Editing）：单个单元格可直接编辑。
2. 行编辑（Row Editing）：整行数据以表单形式展示，支持批量修改。
3. 内联编辑（Inline Editing）：结合按钮或快捷键触发编辑模式。

1. 单元格编辑：像 Excel 一样灵活

单元格编辑允许用户点击或双击某个单元格，直接输入新内容。例如，在用户管理表格中，用户可以直接修改“年龄”或“邮箱”字段。

实现步骤：

• 在列定义中设置 editor 属性，指定编辑器类型（如文本框、下拉框）。
• 通过 onAfterEdit 事件捕获修改后的数据，并同步到后端。

代码示例：

$('#userGrid').datagrid({  
    columns:[[  
        {field:'name', title:'Name', width:100},  
        {field:'age', title:'Age', width:100,  
            editor:{  
                type:'numberbox',  
                options:{min:1, max:120}  
            }  
        },  
        {field:'email', title:'Email', width:200,  
            editor:'text'  
        }  
    ]],  
    onAfterEdit: function(rowIndex, rowData, changes){  
        console.log('修改后的数据:', changes);  
        // 发送 AJAX 请求更新数据  
    }  
});  

2. 行编辑：表单化的数据修改

行编辑将整行数据转化为表单控件，用户可以在同一界面中修改多个字段。例如，在订单管理中，用户可以选择一行订单，将其转换为表单，修改“收货地址”和“支付状态”。

实现方法：

• 使用 beginEdit 和 endEdit 方法控制编辑状态。
• 通过 saveRow 和 cancelRow 提交或取消修改。

代码示例：

// 点击“编辑”按钮时触发  
function startRowEditing(index){  
    $('#orderGrid').datagrid('beginEdit', index);  
}  

// 提交修改  
function saveRow(index){  
    $('#orderGrid').datagrid('endEdit', index);  
    // 调用保存接口  
}  

3. 内联编辑：快捷键与按钮联动

内联编辑通过快捷键（如 F2）或按钮触发，提供更直观的交互体验。例如，用户可以通过按下 Enter 键快速提交修改。

代码示例：

// 监听键盘事件  
$('#productGrid').on('keydown', function(e){  
    if(e.keyCode === 13) { // 回车键  
        var row = $('#productGrid').datagrid('getSelected');  
        if(row) {  
            // 执行保存逻辑  
        }  
    }  
});  

扩展可编辑数据网格的步骤

以下是实现可编辑数据网格的完整流程：

步骤 1：初始化数据网格

首先，定义基础表格结构，加载数据源。

$('#editableGrid').datagrid({  
    url: '/api/data', // 远程数据接口  
    columns:[[  
        {field:'id', title:'ID', width:50},  
        {field:'title', title:'标题', width:200},  
        {field:'status', title:'状态', width:100}  
    ]],  
    pagination: true // 启用分页  
});  

步骤 2：配置可编辑列

在列定义中添加 editor 属性，指定编辑器类型。例如，使用下拉框选择“状态”：

{  
    field:'status',  
    title:'状态',  
    width:100,  
    editor:{  
        type:'combobox',  
        options:{  
            valueField:'value',  
            textField:'text',  
            data:[  
                {value:'active', text:'启用'},  
                {value:'inactive', text:'禁用'}  
            ]  
        }  
    }  
}  

步骤 3：处理编辑事件

通过 onAfterEdit 监听修改，并将数据发送到后端。

$('#editableGrid').datagrid({  
    onLoadSuccess: function(data){  
        // 表格加载完成后自动进入编辑模式  
        this.datagrid('beginEdit', 0);  
    },  
    onAfterEdit: function(index, row, changes){  
        $.ajax({  
            url: '/api/update',  
            type: 'POST',  
            data: row,  
            success: function(response){  
                if(response.success) {  
                    this.datagrid('acceptChanges'); // 确认修改  
                } else {  
                    this.datagrid('rejectChanges'); // 撤销修改  
                }  
            }  
        });  
    }  
});  

实际案例：用户管理系统的可编辑表格

假设我们正在开发一个用户管理系统，需要实现以下功能：

1. 展示用户列表，包含姓名、邮箱、角色、状态。
2. 允许用户直接在表格中修改角色或状态。
3. 添加“删除”按钮，支持批量删除操作。

1. HTML 结构

<table id="userTable" class="easyui-datagrid" style="width:100%;height:auto">  
    <thead>  
        <tr>  
            <th data-options="field:'id', width:50">ID</th>  
            <th data-options="field:'name', width:150">姓名</th>  
            <th data-options="field:'email', width:200">邮箱</th>  
            <th data-options="field:'role', width:100, editor:{type:'combobox', options:{data:[{value:'user', text:'普通用户'}, {value:'admin', text:'管理员'}]}}">角色</th>  
            <th data-options="field:'status', width:100, editor:'checkbox'">状态</th>  
            <th data-options="field:'action', width:100, formatter:formatAction">操作</th>  
        </tr>  
    </thead>  
</table>  

2. JavaScript 配置

function formatAction(value, row, index) {  
    return '<a href="javascript:void(0)" onclick="deleteRow('+index+')">删除</a>';  
}  

$('#userTable').datagrid({  
    url: '/api/users',  
    fitColumns: true,  
    rownumbers: true,  
    toolbar: [{  
        text: '新增用户',  
        iconCls: 'icon-add',  
        handler: function() {  
            // 新增行逻辑  
        }  
    }],  
    onDblClickRow: function(index, row) {  
        $(this).datagrid('beginEdit', index);  
    },  
    onAfterEdit: function(index, row) {  
        saveUser(row); // 调用保存方法  
    }  
});  

function deleteRow(index) {  
    $.messager.confirm('确认删除', '确定删除该用户？', function(r){  
        if (r) {  
            $('#userTable').datagrid('deleteRow', index);  
            // 发送删除请求  
        }  
    });  
}  

最佳实践与注意事项

1. 数据验证

在编辑过程中，需确保用户输入的数据符合业务规则。例如，邮箱格式校验、角色值的合法性。可通过以下方式实现：

// 在 editor 配置中添加验证规则  
{  
    field: 'email',  
    editor: {  
        type: 'validatebox',  
        options: {  
            validType: 'email'  
        }  
    }  
}  

2. 性能优化

• 分页与延迟加载：对于大数据量，启用分页并避免一次性加载全部数据。
• 异步保存：在 onAfterEdit 中使用异步请求，避免阻塞界面。

3. 可视化提示

• 通过 iconCls 添加图标，增强交互反馈（如成功/失败提示）。
• 使用 progress 组件显示数据保存进度。

常见问题解答

Q：如何在编辑时禁用某些列？
A：在 editor 配置中设置 readonly: true，或通过 beforeEdit 事件动态判断是否允许编辑。

Q：如何实现多行同时编辑？
A：默认情况下，数据网格仅允许编辑单行。可通过自定义事件或扩展插件支持多行编辑。

Q：编辑过程中如何回滚数据？
A：调用 rejectChanges() 方法可撤销所有未保存的修改。

结论

通过扩展 jQuery EasyUI 的数据网格功能，开发者可以快速实现高效、直观的数据交互界面。本文从基础概念到实际案例，详细讲解了如何通过配置编辑器、处理事件、优化性能等步骤，打造一个灵活且强大的可编辑数据网格。无论是用户管理、订单系统还是内容管理，这一技术都能显著提升用户体验与开发效率。

希望本文能帮助读者掌握这一实用技能，并在实际项目中发挥价值。如需进一步探讨具体场景或优化方案，欢迎在评论区交流！