jQuery EasyUI 数据网格与树插件 – Datagrid 数据网格（长文讲解）

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

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 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 开发中，用户界面（UI）的复杂性和交互性需求日益增长。jQuery EasyUI 数据网格与树插件作为一套功能强大的开源框架，为开发者提供了直观的数据展示和树形结构管理能力。其中，Datagrid 数据网格是 EasyUI 的核心组件之一，能够高效实现表格数据的动态加载、分页、排序和过滤等功能。本文将深入解析 Datagrid 的核心原理、配置方法及与树插件的协作场景，通过案例演示帮助读者掌握其实战应用技巧。

jQuery EasyUI 框架概述

jQuery EasyUI 是一个基于 jQuery 的 UI 框架，专注于提供丰富的组件库和数据交互能力。其核心优势在于：

1. 零依赖：仅需引入 jQuery 和 EasyUI 的 CSS/JS 文件即可快速开发。
2. 模块化设计：组件独立封装，开发者可按需引入 Datagrid、Tree、Menu 等模块。
3. 数据驱动：支持本地数据绑定和远程 Ajax 请求，与后端无缝衔接。

例如，一个简单的 Datagrid 表格可通过以下代码快速创建：

<table id="userGrid"></table>
<script>
$("#userGrid").datagrid({
    url: '/api/users', // 远程数据接口
    columns: [[
        {field:'id', title:'ID', width:80},
        {field:'name', title:'Name', width:150}
    ]]
});
</script>

Datagrid 数据网格的核心功能解析

1. 数据绑定与配置

Datagrid 的核心功能是动态展示数据。其数据源支持两种模式：

• 本地数据：通过 data 属性直接传递 JSON 数组。
• 远程数据：通过 url 属性发起 Ajax 请求，返回 JSON 数据。

本地数据示例

<table id="localGrid"></table>
<script>
var localData = [
    {id:1, name:'Alice', age:25},
    {id:2, name:'Bob', age:30}
];
$("#localGrid").datagrid({
    data: localData,
    columns: [[
        {field:'id', title:'ID'},
        {field:'name', title:'Name'},
        {field:'age', title:'Age'}
    ]]
});
</script>

远程数据示例

当数据量较大时，建议使用远程接口。服务器需返回类似以下格式的 JSON：

{
    "total": 200,
    "rows": [
        {id:1, name:'Alice', age:25},
        {id:2, name:'Bob', age:30}
    ]
}

2. 分页与排序功能

Datagrid 内置分页组件，通过 pagination: true 启用，并可通过以下参数配置：

• pageSize: 每页显示行数（默认 10）。
• pageNumber: 当前页码（默认 1）。
• pageList: 可选页数集合（如 [10, 20, 30]）。

分页配置代码

$("#userGrid").datagrid({
    pagination: true,
    pageSize: 15,
    pageList: [10, 15, 20]
});

排序功能通过 sortName 和 sortOrder 参数控制，默认按 asc 排序。开发者可通过 onSortColumn 事件自定义排序逻辑。

3. 数据操作与事件绑定

Datagrid 支持增删改查（CRUD）操作，可通过以下方式实现：

• 添加/编辑数据：结合 form 组件，通过 appendRow 或 updateRow 方法操作。
• 删除数据：触发 remove 事件，同步更新后端数据。
• 自定义按钮：在工具栏中添加按钮，绑定 onClickRow 或 onDblClickRow 等事件。

示例：工具栏按钮操作

<table id="userGrid">
    <thead>
        <tr>
            <th field="name">Name</th>
            <th field="action">Action</th>
        </tr>
    </thead>
</table>

$("#userGrid").datagrid({
    toolbar: [{
        text: 'Add User',
        iconCls: 'icon-add',
        handler: function() {
            // 调用表单弹窗
        }
    }]
});

树插件（Tree）与 Datagrid 的协作场景

1. 树形结构与表格的联动

在复杂业务场景中，树插件（Tree）常与 Datagrid 配合使用。例如：

• 部门树与员工列表：左侧为部门树，右侧 Datagrid 显示当前选中部门的员工信息。
• 文件目录与文件属性表：树插件展示文件夹层级，表格展示选中文件的元数据。

示例：树与表格联动代码

<div style="width:200px; float:left;">
    <ul id="deptTree"></ul>
</div>
<div style="margin-left:220px;">
    <table id="empGrid"></table>
</div>

$("#deptTree").tree({
    url: '/api/departments',
    onLoadSuccess: function(node, data) {
        if (!node) {
            loadEmployees(data.id); // 加载根节点下的员工
        }
    }
});

function loadEmployees(deptId) {
    $("#empGrid").datagrid({
        url: '/api/employees?deptId=' + deptId
    });
}

2. 树形表格（TreeGrid）的高级应用

当需要直接在表格中展示层级数据时，可使用 TreeGrid 组件。它结合了 Tree 和 Datagrid 的特性，通过 treeField 属性指定层级关系字段。

TreeGrid 配置示例

$("#treeGrid").treegrid({
    url: '/api/hierarchical-data',
    treeField: 'name',
    columns: [[
        {field:'id', title:'ID'},
        {field:'name', title:'Name'},
        {field:'parent', title:'Parent ID'}
    ]]
});

实战案例：用户管理系统

1. 需求分析

构建一个包含以下功能的用户管理界面：

• 左侧树插件展示部门层级。
• 右侧 Datagrid 显示当前部门的用户列表。
• 支持用户信息的增删改查。

2. HTML 结构与样式

<div class="container">
    <div class="left-panel">
        <ul id="deptTree"></ul>
    </div>
    <div class="right-panel">
        <table id="userGrid"></table>
    </div>
</div>

3. 核心代码实现

部门树配置

$("#deptTree").tree({
    url: '/api/departments',
    onLoadSuccess: function() {
        // 默认加载根节点下的用户
        var root = $('#deptTree').tree('getRoot');
        loadUsers(root.id);
    }
});

// 监听树节点选择事件
$("#deptTree").tree({
    onBeforeSelect: function(node) {
        loadUsers(node.id);
        return false; // 取消默认选中状态
    }
});

用户表格配置

function loadUsers(deptId) {
    $("#userGrid").datagrid({
        url: '/api/users?dept=' + deptId,
        columns: [[
            {field:'id', title:'ID'},
            {field:'name', title:'Name'},
            {field:'email', title:'Email'},
            {field:'action', title:'Action',
                formatter: function(value,row) {
                    return '<a href="#" class="edit-btn">Edit</a>';
                }
            }
        ]],
        pagination: true
    });
}

性能优化与常见问题

1. 数据加载优化

• 延迟加载（Lazy Loading）：通过 lazyLoad 属性控制树节点的异步加载。
• 分页与过滤：限制每页数据量，并通过 URL 参数传递搜索条件。

2. 常见问题解决

• 跨域请求失败：确保后端接口支持 CORS 头配置。
• 表格样式错乱：检查 CSS 文件是否正确引入，并确保容器有固定宽度。
• 数据未更新：调用 refresh 方法强制刷新表格，或通过 loadData 更新本地数据。

结论

通过本文的讲解，读者应能掌握 jQuery EasyUI 数据网格与树插件 的核心功能与协作场景。Datagrid 不仅简化了复杂数据的展示逻辑，还通过分页、排序和联动设计提升了用户体验。在实际开发中，开发者需结合业务需求，合理配置组件参数，并利用事件驱动机制实现动态交互。随着前端技术的演进，EasyUI 仍是一个值得推荐的轻量级解决方案，尤其适合快速搭建企业级管理后台。

如需进一步探索，建议参考官方文档并尝试复现案例中的代码逻辑。通过持续实践，开发者将能更灵活地运用这些工具，构建出功能完善且交互友好的 Web 应用。