异常教程

jQuery EasyUI 应用 – 创建 CRUD 应用（长文讲解）

更新时间:

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

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 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 作为一款基于 jQuery 的开源前端框架，凭借其丰富的 UI 组件和简单易用的 API 设计，成为许多开发者实现高效开发的得力工具。本文将围绕“jQuery EasyUI 应用 – 创建 CRUD 应用”这一主题，通过实际案例和代码示例，逐步展示如何利用 EasyUI 快速搭建一个包含增删改查（CRUD）功能的 Web 应用。无论是编程初学者还是中级开发者，都能通过本文掌握 EasyUI 的核心功能与开发逻辑。

一、环境搭建与基础概念解析

1.1 开发环境准备

创建一个简单的 HTML 文件，并引入 jQuery 和 EasyUI 的核心库文件。以下是基础代码模板：

<!DOCTYPE html>
<html>
<head>
    <title>EasyUI CRUD 示例</title>
    <link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
    <link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/icon.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

1.2 EasyUI 核心概念比喻

将 EasyUI 比作“乐高积木套件”：

  • 组件（Widgets）：如表格、对话框、按钮等，对应乐高积木的基本模块。
  • 主题（Themes）：预设的样式模板，类似乐高积木的外观贴纸。
  • API 方法：通过调用方法动态控制组件，如同用说明书拼装积木。

二、界面设计：构建 CRUD 的可视化基础

2.1 数据表格（Datagrid）的创建

数据表格是实现 CRUD 功能的核心组件。以下是定义一个基本表格的代码示例：

<table id="userList" class="easyui-datagrid" style="width:100%;height:auto;"
    data-options="
        url: 'data.json', 
        method: 'get',
        fitColumns: true,
        singleSelect: true,
        pagination: true,
        rownumbers: true,
        toolbar: '#toolbar'
    ">
    <thead>
        <tr>
            <th data-options="field:'id', width:80">ID</th>
            <th data-options="field:'name', width:100">姓名</th>
            <th data-options="field:'email', width:150">邮箱</th>
            <th data-options="field:'phone', width:120">电话</th>
        </tr>
    </thead>
</table>

关键参数解释：

  • url：表格数据来源的 API 地址
  • fitColumns：自动调整列宽适应容器
  • toolbar：绑定操作按钮的工具栏

2.2 工具栏（Toolbar）的增删改查按钮

在表格上方添加功能按钮，实现用户交互入口：

<div id="toolbar">
    <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">新增</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">编辑</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="deleteUser()">删除</a>
</div>

三、数据交互：实现 CRUD 核心功能

3.1 新增（Create）功能实现

通过弹窗表单收集用户输入，提交到后端接口：

<!-- 新增/编辑弹窗 -->
<div id="dlg" class="easyui-dialog" style="width:400px;padding:10px"
    data-options="closed:true,modal:true,title:'用户信息',buttons:'#dlg-buttons'">
    <form id="fm" method="post">
        <div style="margin-bottom:10px">
            <input name="name" class="easyui-validatebox" required="true" placeholder="姓名">
        </div>
        <div style="margin-bottom:10px">
            <input name="email" class="easyui-validatebox" validType="email" required="true" placeholder="邮箱">
        </div>
        <div style="margin-bottom:10px">
            <input name="phone" class="easyui-validatebox" required="true" placeholder="电话">
        </div>
    </form>
</div>

<script>
function newUser() {
    $('#dlg').dialog('open');
    $('#fm').form('clear');
}
</script>

关键点：

  • easyui-validatebox 提供表单验证功能
  • validType="email" 自动校验邮箱格式

3.2 数据提交与后端交互

通过 AJAX 将表单数据提交到后端，并刷新表格：

function saveUser() {
    $('#fm').form('submit', {
        url: 'saveUser.php',
        onSubmit: function() {
            return $(this).form('validate');
        },
        success: function(result) {
            var result = eval('(' + result + ')');
            if (result.success) {
                $('#dlg').dialog('close');
                $('#userList').datagrid('reload');
            } else {
                $.messager.show({    // 显示提示信息
                    title: '错误',
                    msg: result.msg
                });
            }
        }
    });
}

四、扩展功能：增强用户体验与安全性

4.1 表格数据动态加载

通过 onLoadSuccess 事件在数据加载后执行操作：

$('#userList').datagrid({
    onLoadSuccess: function(data) {
        if (data.total == 0) {
            $.messager.alert('提示', '当前无数据');
        }
    }
});

4.2 行内编辑与取消操作

为表格添加行内编辑功能，并实现撤销修改：

// 启用单元格编辑
$('#userList').datagrid({
    editIndex: undefined,
    onClickCell: function(index, field) {
        if (index != $('#userList').datagrid('getEditIndex')) {
            $('#userList').datagrid('beginEdit', index);
        }
    }
});

// 取消编辑
function cancelEdit() {
    $('#userList').datagrid('cancelEdit', $('#userList').datagrid('getEditIndex'));
}

五、完整代码整合与调试

5.1 完整 HTML 结构示例

<!DOCTYPE html>
<html>
<head>
    <!-- 引入资源文件 -->
</head>
<body>
    <!-- 表格和工具栏 -->
    <!-- 弹窗表单 -->
    <!-- 按钮组 -->
    <script>
        // 前面所有 JavaScript 方法的整合
    </script>
</body>
</html>

5.2 调试与常见问题

  • 数据不显示：检查 url 地址是否正确，返回的 JSON 格式是否符合 EasyUI 要求
  • 表单验证失败：确认 validType 参数与 EasyUI 验证方法匹配
  • 界面错位：使用浏览器开发者工具检查 CSS 样式冲突

六、总结与进阶方向

通过本文的实践，读者已掌握了使用 jQuery EasyUI 快速搭建 CRUD 应用的核心方法。EasyUI 的优势在于其开箱即用的组件和简洁的 API 设计，但实际项目中还需注意以下进阶方向：

  1. 性能优化：对大数据量表格使用虚拟滚动技术
  2. 权限控制：结合后端实现数据访问权限管理
  3. 响应式设计：适配移动端屏幕尺寸

掌握这些技能后，开发者可以进一步探索 EasyUI 的高级功能，如动态表单生成、复杂表单验证等，从而构建更强大的企业级 Web 应用。记住，实践是最好的老师——尝试将本文的示例代码部署到本地服务器，逐步添加更多业务逻辑，你将收获更深刻的理解。

jQuery EasyUI 的魅力在于其降低了复杂交互的实现门槛，但要真正驾驭它，还需结合项目需求不断探索。希望本文能成为你迈向高效开发的第一步。

最新发布

查看更多文章