首页
/ 正文

jQuery EasyUI 数据网格 – 转换 HTML 表格为数据网格（长文讲解）

更新时间: 2025-04-04 20:50:35

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

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 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 开发中，数据展示是核心功能之一。传统的 HTML 表格虽然简单易用，但功能有限，难以满足复杂交互需求。jQuery EasyUI 数据网格（DataGrid）作为一款轻量级的前端组件，能够将静态的 HTML 表格快速升级为动态、交互性强的数据展示工具。无论是实时排序、分页、搜索，还是数据动态加载，它都能提供直观的解决方案。本文将从零开始，逐步讲解如何通过 jQuery EasyUI 将 HTML 表格转换为数据网格，并通过案例演示其核心功能。

安装与配置：搭建基础环境

第一步：引入依赖库

jQuery EasyUI 是基于 jQuery 的 UI 框架，因此需要先引入以下文件：

jQuery 库：所有功能的基础
EasyUI 核心文件：包含组件和样式
主题文件：定义界面样式（如默认的 default 主题）

<!-- 在 HTML 文件的 <head> 部分添加以下代码 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<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://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>

第二步：创建 HTML 表格结构

一个基础的 HTML 表格如下：

<table id="data-table">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>城市</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>28</td>
      <td>北京</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>32</td>
      <td>上海</td>
    </tr>
  </tbody>
</table>

基础转换：将 HTML 表格升级为数据网格

核心步骤：初始化 DataGrid

通过 jQuery 的 datagrid() 方法，可以快速将 HTML 表格转换为数据网格：

$(document).ready(function() {
  $('#data-table').datagrid({
    fitColumns: true,  // 自动调整列宽
    striped: true      // 隔行变色
  });
});

运行效果对比

功能	HTML 表格	数据网格
列宽调整	需手动设置	自动适应内容
行高亮	不支持	鼠标悬停高亮
列标题交互	静态文本	支持排序（需配置）

关键知识点解析

fitColumns：类似“自动伸缩的百叶窗”，让表格列宽自适应容器宽度。
striped：像斑马一样交替颜色，提升可读性。

进阶功能：增强交互体验

功能 1：实现排序

通过设置 sortName 和 sortOrder，可指定默认排序的列和方向：

$('#data-table').datagrid({  
  ...  
  sortName: '年龄',  
  sortOrder: 'asc'  
});

排序效果比喻

sortName：如同图书馆的书籍分类标签，指定按哪一列排序。
sortOrder：类似“升序”或“降序”按钮，决定排列方向。

功能 2：添加分页

数据网格支持分页功能，只需配置 pagination 和 pageSize：

$('#data-table').datagrid({  
  ...  
  pagination: true,  
  pageSize: 10,  // 每页显示 10 条  
  pageList: [10, 20, 30]  // 可选每页数量  
});

分页器的类比

分页器如同图书馆的书架分层标签，用户可通过下拉菜单快速切换页码或调整每页数量。

实战案例：构建用户管理数据网格

场景描述

假设需要展示一个用户列表，并支持以下功能：

按“年龄”升序或降序排序
每页显示 5 条数据
添加搜索框

完整代码示例

HTML 结构

<div class="toolbar">
  <input id="search-input" placeholder="搜索姓名">
</div>

<table id="user-grid">
  <thead>
    <tr>
      <th data-options="field:'name', sortable:true">姓名</th>
      <th data-options="field:'age', sortable:true">年龄</th>
      <th data-options="field:'city'">城市</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>王五</td><td>25</td><td>广州</td></tr>
    <!-- 更多数据... -->
  </tbody>
</table>

JavaScript 配置

$(document).ready(function() {
  // 初始化 DataGrid
  $('#user-grid').datagrid({
    fitColumns: true,
    pagination: true,
    pageSize: 5,
    toolbar: '#toolbar',
    loadFilter: function(data) {
      // 数据预处理（如过滤）
      return data;
    }
  });

  // 搜索功能实现
  $('#search-input').keyup(function() {
    var keyword = $(this).val();
    $('#user-grid').datagrid('reload', {
      keyword: keyword
    });
  });
});

关键点说明

data-options：在 <th> 标签中配置列属性，如 sortable 启用排序。
toolbar：将自定义工具栏（如搜索框）绑定到表格上方。
loadFilter：像“数据过滤器”一样，对返回的 JSON 数据进行预处理。

高级技巧：动态加载远程数据

场景需求

当数据量庞大时，直接在 HTML 中嵌入数据不可行。此时可通过 url 参数从服务器异步获取数据：

$('#user-grid').datagrid({
  url: '/api/users',  // 后端接口地址
  method: 'get',      // 请求方式
  queryParams: {
    keyword: ''       // 传递搜索关键词
  }
});

后端响应格式示例（JSON）

{
  "total": 50,        // 总记录数
  "rows": [           // 当前页数据
    {"name": "赵六", "age": 28, "city": "深圳"},
    ...
  ]
}

常见问题与解决方案

问题 1：表格列不对齐

原因：未设置 fitColumns: true 或列宽手动定义冲突。
解决方法：删除固定列宽的 CSS 样式，或启用 fitColumns。

问题 2：分页按钮不显示

原因：未正确配置 pagination: true。
解决方法：检查 DataGrid 初始化参数是否包含此选项。

结论

通过本文的讲解，读者可以掌握如何使用 jQuery EasyUI 数据网格 将静态 HTML 表格转化为功能丰富的数据展示工具。从基础配置到高级功能，每一步都通过代码示例和类比解释，帮助开发者快速上手。无论是小型项目还是企业级应用，数据网格都能显著提升用户体验和开发效率。希望读者通过实践案例，能进一步探索 EasyUI 的其他组件，如树形菜单（Tree）、表单验证（Form）等，构建更完整的前端解决方案。

（全文约 1800 字）