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）是一个强大的工具，它能够帮助开发者快速构建功能丰富的数据展示界面。对于编程初学者和中级开发者而言，理解并掌握这一工具，不仅能提升开发效率，还能显著增强用户交互体验。本文将从基础概念、核心功能到实际案例，逐步解析数据网格视图的使用方法，并通过形象的比喻和代码示例，帮助读者快速上手。

数据网格视图类似于 Excel 表格或数据库表的可视化呈现，但它具备动态加载、分页、排序、过滤等高级功能。通过 EasyUI 的封装，开发者无需从零实现这些复杂逻辑，只需通过简单的配置即可完成界面搭建。

基础用法：快速构建数据网格

1. 环境准备与初始化

要使用 EasyUI 的数据网格视图，首先需要引入相关库文件。通常，开发者需在 HTML 文件中引入 jQuery 和 EasyUI 的 CSS、JS 文件：

<link rel="stylesheet" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" href="easyui/themes/icon.css">
<script src="jquery.min.js"></script>
<script src="easyui/jquery.easyui.min.js"></script>

接下来，通过 HTML 标签定义数据网格的容器：

<table id="dataGrid" class="easyui-datagrid"></table>

2. 基本配置与数据绑定

通过 JavaScript 配置数据网格的核心属性。例如：

$('#dataGrid').datagrid({  
    url: 'data.json',          // 数据源地址（JSON 格式）  
    columns: [[  
        {field: 'id', title: '编号', width: 80},  
        {field: 'name', title: '名称', width: 150},  
        {field: 'price', title: '价格', width: 100, align: 'right'}  
    ]],  
    fitColumns: true,          // 自动调整列宽  
    singleSelect: true         // 允许单选  
});  

关键点解析

• url 属性：指定数据源的 URL，EasyUI 会自动通过 AJAX 请求获取数据。
• columns 数组：定义表格的列，每个列对象包含字段名（field）、标题（title）、宽度（width）等属性。
• fitColumns：当列宽总和不足时，自动拉伸列以填充表格。

比喻：将数据网格视图想象为一个“智能表格”，开发者只需提供数据和列定义，它会像“自动整理书架”一样，自动调整布局并展示内容。

进阶功能：分页、排序与自定义操作

1. 分页功能配置

分页是数据网格的核心需求之一。通过以下配置，可启用分页并设置每页显示数量：

$('#dataGrid').datagrid({  
    // 其他配置...  
    pagination: true,          // 启用分页  
    pageSize: 10,              // 默认每页显示 10 条  
    pageList: [10, 20, 30],    // 可选的每页数量  
    toolbar: '#toolbar'        // 工具栏容器 ID  
});  

在 HTML 中定义工具栏：

<div id="toolbar">  
    <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true">添加</a>  
</div>  

2. 排序与过滤

EasyUI 支持通过点击列标题触发排序，并可通过 sortName 和 sortOrder 属性设置默认排序规则：

$('#dataGrid').datagrid({  
    sortName: 'price',         // 默认按价格排序  
    sortOrder: 'desc',         // 降序排列  
    remoteSort: false          // 是否远程排序（false 为客户端排序）  
});  

过滤功能扩展

若需实现动态过滤，可通过 loadFilter 方法处理返回数据：

$('#dataGrid').datagrid({  
    loadFilter: function(data) {  
        // 自定义过滤逻辑（例如筛选价格 > 100 的数据）  
        return data.rows.filter(item => item.price > 100);  
    }  
});  

扩展功能：自定义列与工具栏

1. 自定义列的渲染

通过 formatter 函数，可以自定义列的显示内容。例如，将价格列格式化为货币形式：

{  
    field: 'price',  
    title: '价格',  
    formatter: function(value, row, index) {  
        return '¥' + value.toFixed(2);  
    }  
}  

2. 工具栏与操作按钮

工具栏（Toolbar）是数据网格上方的操作区域，可用于添加按钮或表单。例如，实现“导出”按钮的功能：

// 在工具栏 HTML 中添加按钮  
<div id="toolbar">  
    <a href="#" class="easyui-linkbutton" onclick="exportData()">导出</a>  
</div>  

// JavaScript 方法  
function exportData() {  
    // 实现导出逻辑（例如生成 CSV 文件）  
    const data = $('#dataGrid').datagrid('getRows');  
    // ...  
}  

实战案例：构建一个库存管理系统

1. 界面设计

创建一个包含商品名称、库存数量、操作按钮的表格：

<table id="inventoryGrid" class="easyui-datagrid">  
    <thead>  
        <tr>  
            <th data-options="field:'id', width:80">编号</th>  
            <th data-options="field:'name', width:200">名称</th>  
            <th data-options="field:'stock', width:100, align:'right'">库存</th>  
            <th data-options="field:'action', width:150">操作</th>  
        </tr>  
    </thead>  
</table>  

2. 数据与交互逻辑

通过 JavaScript 配置数据源和操作按钮：

$('#inventoryGrid').datagrid({  
    url: '/api/inventory',  
    columns: [[  
        {field: 'id', title: '编号'},  
        {field: 'name', title: '名称'},  
        {field: 'stock', title: '库存', align: 'right'},  
        {  
            field: 'action',  
            title: '操作',  
            formatter: function(value, row) {  
                return '<a href="#" onclick="updateStock(' + row.id + ')">编辑</a>';  
            }  
        }  
    ]],  
    onLoadSuccess: function() {  
        // 数据加载完成后的回调逻辑  
    }  
});  

function updateStock(id) {  
    // 实现库存更新逻辑  
}  

3. 后端接口模拟

假设后端接口返回以下 JSON 数据：

{  
    "total": 20,  
    "rows": [  
        {"id": 1, "name": "笔记本电脑", "stock": 50},  
        {"id": 2, "name": "智能手机", "stock": 120}  
    ]  
}  

性能优化与常见问题

1. 分页与服务端处理

当数据量较大时，建议在服务端实现分页逻辑，并通过 pageNumber、pageSize 参数传递当前页码和页数。例如：

$('#dataGrid').datagrid({  
    queryParams: {  
        pageSize: 20,  
        pageNumber: 1  
    }  
});  

2. 动态加载与虚拟滚动

对于海量数据，可启用虚拟滚动（Virtual Scrolling）以提升性能：

$('#dataGrid').datagrid({  
    view: 'scrollview',        // 启用虚拟滚动视图  
    virtualScroll: true,  
    pageSize: 500             // 每次加载 500 条数据  
});  

3. 常见问题解决

• 表格列不对齐：检查 fitColumns 是否设置为 true，或手动调整列宽总和。
• 数据不更新：调用 reload() 方法强制重新加载数据：

  $('#dataGrid').datagrid('reload');  
  

结论

通过本文的讲解，读者可以掌握 jQuery EasyUI 扩展 – 数据网格视图 的核心功能与实战技巧。从基础配置到高级扩展，数据网格视图能够帮助开发者快速构建高效、直观的 Web 数据展示界面。无论是电商系统的订单列表，还是企业级的后台管理模块，这一工具都能显著提升开发效率与用户体验。

未来，随着前端技术的演进，EasyUI 也在持续迭代以适配新需求。建议开发者关注官方文档，并结合实际项目不断实践，逐步掌握更多高级功能。

常见问题解答

Q：如何实现数据网格的多条件搜索？
A：通过 queryParams 属性传递搜索参数，并在服务端处理过滤逻辑。例如：

// 搜索按钮点击事件  
function search() {  
    const keyword = $('#searchInput').val();  
    $('#dataGrid').datagrid({  
        queryParams: {  
            keyword: keyword  
        }  
    });  
}  

Q：如何在数据网格中显示图片？
A：使用 formatter 函数生成图片标签：

{  
    field: 'image',  
    title: '图片',  
    formatter: function(value) {  
        return '<img src="' + value + '" width="50px" height="50px">';  
    }  
}  

通过这些扩展技巧，开发者可以进一步定制数据网格视图，满足多样化业务需求。