异常教程

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 开发中，数据展示与交互的效率直接影响用户体验。jQuery EasyUI 数据网格（DataGrid） 是一个功能强大的前端组件，它简化了表格数据的动态渲染、分页、排序和过滤等操作。而行内编辑（inline editing） 功能，更是让开发者能够直接在数据网格中实现“所见即所得”的数据修改，无需跳转页面或弹窗，极大提升了交互的流畅性。

本文将从基础到实践，深入讲解如何在 EasyUI 数据网格中启用行内编辑功能。无论你是编程新手还是有一定经验的开发者，都能通过本文掌握这一实用技能，并通过代码案例快速上手。

数据网格与行内编辑：为什么需要它们？

数据网格：数据展示的“瑞士军刀”

数据网格（DataGrid）可以被视为一个“增强版表格”。它不仅支持基础的增删改查，还能通过配置实现以下功能：

  • 动态加载：通过 AJAX 异步获取数据，减少页面刷新。
  • 分页与排序：用户可自行调整分页大小或按某一列排序。
  • 列定义：自定义列的标题、宽度、格式甚至数据源字段。

举个形象的比喻：数据网格就像一个“智能 Excel 表格”，开发者只需配置规则，它就能自动处理数据的显示与交互逻辑。

行内编辑：交互体验的“点睛之笔”

传统 Web 开发中，修改数据通常需要用户点击“编辑”按钮，跳转到单独的页面或弹窗。而行内编辑允许用户直接在数据网格的单元格中修改内容，类似直接在 Excel 单元格中输入数据。这种设计减少了操作步骤，符合现代 UI 设计的“极简”趋势。

例如，在学生管理系统中，用户可以直接在“成绩”列的单元格内输入新分数，而无需离开当前页面。这种无缝的体验，正是行内编辑的价值所在。

快速入门：EasyUI 数据网格基础

环境准备

在开始之前，确保已引入以下资源：

  1. jQuery 库（如 jquery.min.js）。
  2. EasyUI 的核心文件（jquery.easyui.min.js 和 easyui.css）。
<link rel="stylesheet" href="easyui/themes/default/easyui.css">
<script src="jquery.min.js"></script>
<script src="jquery.easyui.min.js"></script>

创建基础数据网格

通过以下代码，可以快速创建一个数据网格：

<table id="studentGrid"></table>

<script>
$(function() {
    $('#studentGrid').datagrid({
        url: '/api/students', // 数据接口地址
        columns: [[
            {field: 'id', title: 'ID', width: 100},
            {field: 'name', title: '姓名', width: 150},
            {field: 'score', title: '成绩', width: 100}
        ]]
    });
});
</script>

注：url 指向的数据接口需返回 JSON 格式的数据，例如：

[{"id":1, "name":"张三", "score":85}, ...]

启用行内编辑：核心配置与步骤

步骤 1：配置编辑模式（editMode）

在 EasyUI 的 datagrid 方法中，通过设置 editMode 属性开启行内编辑。默认值为 none，需改为 row 或 cell：

  • row：整行可编辑（点击行或按钮触发）。
  • cell：单个单元格可编辑（双击单元格触发）。
$('#studentGrid').datagrid({
    // 其他配置...
    editMode: 'row' // 或 'cell'
});

步骤 2：定义编辑事件回调

为了实现数据的保存或取消操作，需要监听以下事件：

  • onBeginEdit：开始编辑时触发，可用于初始化编辑器。
  • onEndEdit：结束编辑时触发，通常用于保存数据。
  • onCancelEdit：取消编辑时触发。
$('#studentGrid').datagrid({
    // 其他配置...
    onBeginEdit: function(index, row) {
        console.log('开始编辑第', index, '行');
    },
    onEndEdit: function(index, row) {
        // 发送修改后的数据到服务器
        $.post('/api/update-student', row, function(response) {
            console.log('保存成功:', response);
        });
    }
});

步骤 3：自定义编辑器（可选）

默认情况下，所有可编辑列会使用文本框（Textfield）。若需其他类型（如下拉框、日期选择器），可通过 editor 属性指定：

columns: [[
    {field: 'name', title: '姓名', editor: 'text'}, // 文本框
    {field: 'gender', title: '性别', editor: {
        type: 'combobox',
        options: {  
            data: [{value: 'M', text: '男'}, {value: 'F', text: '女'}]
        }
    }},
    {field: 'birthday', title: '出生日期', editor: {
        type: 'datebox',
        options: {formatter: function(date){return date.getFullYear() + '-' + (date.getMonth()+1)}}
    }}
]]

实战案例：学生信息管理系统的行内编辑

案例目标

创建一个学生信息表格，允许用户：

  1. 直接双击单元格修改信息（如姓名、成绩）。
  2. 点击“保存”或“取消”按钮提交或放弃更改。

完整代码示例

HTML 结构

<div style="padding: 20px;">
    <table id="studentGrid" class="easyui-datagrid" style="width:100%;height:400px"
           data-options="
               url: 'students.json', // 模拟数据源
               method: 'get',
               rownumbers: true,
               singleSelect: true,
               fitColumns: true,
               pagination: true,
               pageSize: 10,
               toolbar: '#toolbar',
               editMode: 'cell',
               onEndEdit: saveStudent,
               onCancelEdit: cancelEdit
           ">
        <thead>
            <tr>
                <th field="id" width="80" align="center">ID</th>
                <th field="name" width="150" editor="text">姓名</th>
                <th field="score" width="100" editor="numberbox">成绩</th>
                <th field="gender" width="100" editor="{type:'combobox', options: {data: [{value:'M',text:'男'},{value:'F',text:'女'}]}}">性别</th>
            </tr>
        </thead>
    </table>
    
    <!-- 工具栏按钮 -->
    <div id="toolbar">
        <a href="#" class="easyui-linkbutton" iconCls="icon-save" onclick="saveAllEdits()">批量保存</a>
    </div>
</div>

JavaScript 逻辑

// 保存单行数据
function saveStudent(index, row) {
    // 模拟异步保存
    setTimeout(() => {
        console.log('已保存:', row);
        // 可在此处调用真实接口
    }, 500);
}

// 取消编辑
function cancelEdit(index, row) {
    console.log('已取消编辑:', row);
}

// 批量保存所有编辑内容（需自行实现）
function saveAllEdits() {
    const rows = $('#studentGrid').datagrid('getRows');
    const editedRows = rows.filter(row => row.isEditing);
    if (editedRows.length === 0) {
        alert('没有需要保存的修改');
        return;
    }
    // 遍历并保存每行数据
    editedRows.forEach(row => saveStudent(null, row));
}

模拟数据文件（students.json）

[
    {id:1, name:"张三", score:85, gender:"M"},
    {id:2, name:"李四", score:90, gender:"F"},
    {id:3, name:"王五", score:78, gender:"M"}
]

进阶技巧与常见问题

技巧 1：动态控制可编辑列

通过 beforeEdit 事件，可以在编辑触发前判断是否允许修改：

beforeEdit: function(index, row) {
    if (row.isAdmin) {
        alert("管理员信息不可编辑");
        return false; // 阻止编辑
    }
    return true;
}

技巧 2：自定义编辑器样式

若默认编辑器（如文本框）样式不满足需求，可通过 style 属性或 CSS 覆盖：

// 在 columns 定义中：
{field: 'note', editor: {
    type: 'textarea',
    options: {style: 'height:50px;'}
}}

问题 1：编辑触发后无法保存

可能原因：未正确配置 onEndEdit 回调或未触发保存逻辑。
解决方案：确保在 onEndEdit 中调用接口，并检查网络请求是否发送成功。

问题 2：多行编辑时数据混乱

原因：EasyUI 默认同一时间仅允许编辑一行或一个单元格。
解决：可通过设置 multiEdit: true 允许多行编辑（需自定义扩展）。

结论

通过本文的讲解，你已掌握了 jQuery EasyUI 数据网格 – 启用行内编辑 的核心方法与实战技巧。从基础配置到复杂场景的扩展，行内编辑功能不仅能提升用户体验，还能减少页面跳转和代码冗余。

建议读者通过以下步骤巩固知识：

  1. 将本文的案例代码部署到本地环境，尝试修改数据并观察效果。
  2. 尝试扩展案例，例如添加“删除行”按钮或实现数据验证逻辑。
  3. 阅读 EasyUI 官方文档，探索更多高级功能（如行内表单或自定义渲染）。

掌握行内编辑后，你将能更高效地构建数据驱动的 Web 应用。希望本文成为你前端进阶路上的“垫脚石”！

最新发布

查看更多文章