异常教程

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 作为一款功能强大的前端 UI 框架，凭借其丰富的组件库和简化开发流程的特点，成为许多开发者构建数据管理界面的首选工具。其中，数据网格（DataGrid） 是 EasyUI 中最常用且功能强大的组件之一，能够快速实现数据的增删改查（CRUD）操作。

本文将从零开始，分步骤讲解如何使用 jQuery EasyUI 创建一个完整的 CRUD 数据网格。无论是编程初学者还是中级开发者，都能通过本文掌握数据网格的核心概念、配置方法以及实际应用场景。

一、环境搭建与基础概念

1.1 开发环境准备

要开始使用 jQuery EasyUI，首先需要准备以下工具：

  • HTML/CSS/JavaScript 基础知识
  • jQuery（EasyUI 的依赖库，需先引入）
  • jQuery EasyUI 的 CSS 和 JavaScript 文件

你可以通过以下方式引入资源：

<!-- 引入 jQuery -->  
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>  

<!-- 引入 EasyUI 的 CSS 和 JS -->  
<link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">  
<script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>

1.2 数据网格的核心概念

数据网格（DataGrid）是一个表格形式的组件，支持动态加载数据、分页、排序、过滤等操作。其核心功能包括：

  • 数据绑定：通过 URL 或本地数据源动态加载数据。
  • CRUD 操作：支持新增、编辑、删除记录。
  • 分页与排序：用户可自定义分页大小、排序规则。
  • 列定义：自定义表格列的显示内容、宽度、对齐方式等。

比喻：可以将数据网格想象为一个“智能表格”，它像 Excel 一样展示数据，但能通过点击按钮或链接直接对数据进行操作。

二、创建基础数据网格

2.1 HTML 结构搭建

首先在 HTML 中定义一个容器，用于承载数据网格：

<div class="easyui-datagrid"  
     id="dataGrid"  
     style="width:100%;height:400px"  
     url="/api/data"  <!-- 数据源的 URL -->  
     pagination="true"  <!-- 启用分页 -->  
     rownumbers="true">  <!-- 显示行号 -->  
</div>

2.2 列定义配置

通过 columns 属性定义表格的列结构。例如，展示用户信息：

$(function(){  
    $('#dataGrid').datagrid({  
        columns:[[  
            {field:'id', title:'ID', width:80},  
            {field:'name', title:'姓名', width:150},  
            {field:'email', title:'邮箱', width:200},  
            {field:'action', title:'操作', width:150,  
                formatter:function(value,row,index){  
                    return '<a href="javascript:void(0)" onclick="editRow('+index+')">编辑</a> | ' +  
                           '<a href="javascript:void(0)" onclick="deleteRow('+index+')">删除</a>';  
                }  
            }  
        ]]  
    });  
});

2.3 数据源配置

数据网格支持从服务端或本地获取数据。以下是一个简单的 JSON 数据示例：

{  
    "total": 3,  
    "rows": [  
        {"id":1, "name":"张三", "email":"zhangsan@example.com"},  
        {"id":2, "name":"李四", "email":"lisi@example.com"},  
        {"id":3, "name":"王五", "email":"wangwu@example.com"}  
    ]  
}

关键点：服务端返回的数据需包含 total（总记录数）和 rows（当前页数据）两个字段。

三、实现 CRUD 功能

3.1 创建（Create）操作

通过弹出表单让用户输入新数据，并提交到服务端：

<!-- 新增按钮 -->  
<button onclick="createNew()">新增用户</button>  

<!-- 表单弹窗 -->  
<div id="createForm" class="easyui-window"  
     title="新增用户"  
     style="width:400px;height:250px;display:none">  
    <form id="newForm">  
        <input name="name" placeholder="姓名" class="easyui-validatebox" required>  
        <input name="email" placeholder="邮箱" class="easyui-validatebox" required>  
    </form>  
</div>  

<script>  
function createNew() {  
    $('#createForm').window('open');  
}  

function saveNew() {  
    // 提交表单到服务端，并刷新数据网格  
    $('#dataGrid').datagrid('reload');  
}  
</script>

3.2 编辑（Update）操作

点击“编辑”按钮时，将当前行数据填充到表单中，修改后提交：

function editRow(index) {  
    var row = $('#dataGrid').datagrid('getRows')[index];  
    // 将 row 数据填充到编辑表单  
    $('#editForm').form('load', row);  
    $('#editForm').window('open');  
}  

function saveEdit() {  
    // 提交修改后的数据到服务端  
    $('#dataGrid').datagrid('reload');  
}

3.3 删除（Delete）操作

通过服务端接口删除指定记录：

function deleteRow(index) {  
    if (confirm("确认删除该记录？")) {  
        var row = $('#dataGrid').datagrid('getRows')[index];  
        // 发送删除请求到服务端  
        $('#dataGrid').datagrid('reload');  
    }  
}

3.4 查询（Read）增强

添加搜索框，根据关键词过滤数据：

<input id="searchInput" placeholder="输入姓名搜索">  
<button onclick="searchData()">搜索</button>  

<script>  
function searchData() {  
    var keyword = $('#searchInput').val();  
    $('#dataGrid').datagrid({  
        queryParams: {keyword: keyword}  // 传递查询参数  
    });  
}  
</script>

四、进阶功能与优化

4.1 分页与排序

默认情况下，数据网格会自动处理分页，但可通过配置进一步优化：

$('#dataGrid').datagrid({  
    pagination: true,  
    pageSize: 10,  // 每页显示条数  
    sortName: 'id',  // 默认排序字段  
    sortOrder: 'asc'  // 排序顺序  
});

4.2 表格样式与交互

通过 CSS 自定义表格样式，或使用 EasyUI 的内置主题：

/* 自定义列样式 */  
.datagrid-cell {  
    font-size: 14px;  
    color: #333;  
}

4.3 异常处理与验证

在表单提交时，添加数据验证逻辑：

$('#newForm').form({  
    onSubmit: function() {  
        return $(this).form('validate');  // 验证表单字段  
    },  
    success: function(data) {  
        alert("保存成功！");  
    }  
});

结论

通过本文，我们系统地学习了如何使用 jQuery EasyUI 创建一个功能完整的 CRUD 数据网格。从环境搭建到基础配置，再到进阶功能的实现，每一步都结合了代码示例和实际场景，确保开发者能够快速上手并应用到项目中。

关键要点回顾：

  1. 数据网格的核心配置包括列定义、数据源和交互事件。
  2. CRUD 操作通过表单弹窗和异步请求实现，需与服务端接口配合。
  3. 通过分页、排序、验证等优化，提升用户体验和数据安全性。

希望本文能成为你构建数据管理界面的实用指南。如果遇到问题，可以通过 EasyUI 的官方文档或社区寻求帮助，继续深入探索其强大功能！

最新发布

查看更多文章