首页
/ 正文

jQuery EasyUI 数据网格 – 扩展行显示细节（建议收藏）

更新时间: 2025-04-04 19:38:49

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

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 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）作为一款功能强大的表格组件，因其直观的 UI 设计和灵活的配置能力，成为许多开发者构建数据驱动型应用的首选工具。然而，随着数据复杂度的提升，用户对“在不跳转页面的情况下查看详细信息”的需求日益增长。此时，扩展行显示细节的功能便成为提升用户体验的关键。

本文将从零开始讲解如何通过 jQuery EasyUI 的 DataGrid 实现扩展行功能，并结合实际案例与代码示例，帮助读者掌握这一技能。无论是编程初学者还是有一定经验的开发者，都能通过本文快速上手，并理解其背后的逻辑与最佳实践。

一、基础概念：理解数据网格与扩展行

1.1 数据网格的核心作用

数据网格（DataGrid）是一个用于展示和操作表格数据的 UI 组件。它支持分页、排序、过滤、编辑、工具栏等高级功能，能够将后端返回的结构化数据以直观的方式呈现给用户。例如，可以将其类比为“电子表格的增强版”，用户无需编写大量代码即可实现复杂的数据展示场景。

1.2 扩展行的定义与价值

扩展行（Expand Row）是指当用户点击某一行时，该行下方会展开一个区域，用于显示与该行相关联的更多详细信息。这一功能的价值在于：

减少页面跳转：用户无需离开当前页面即可查看深层数据。
提升信息密度：通过折叠与展开的切换，平衡表格的简洁性与数据的丰富性。
增强交互体验：通过视觉反馈（如动画或图标）让用户明确操作结果。

1.3 核心概念对比

概念	定义	类比
数据网格	用于展示表格数据的容器，支持分页、排序等操作。	图书馆目录的电子版
扩展行	点击某一行后展开的子区域，用于显示关联的详细信息。	翻开书页查看章节具体内容
数据绑定	将后端数据与前端 UI 组件动态关联，实现数据驱动。	书架上的书籍与目录条目的映射

二、实现扩展行的核心步骤

2.1 步骤一：初始化数据网格

首先，需要在 HTML 中引入 jQuery 和 EasyUI 的依赖库，并定义一个容器元素（如 <div>）。例如：

<div id="dataGrid" style="width: 100%; height: 500px;"></div>

接着，通过 JavaScript 配置数据网格的基本属性：

$('#dataGrid').datagrid({  
    url: '/api/data', // 后端数据接口  
    fitColumns: true,  
    rownumbers: true,  
    columns: [[  
        {field: 'id', title: 'ID', width: 80},  
        {field: 'name', title: '名称', width: 150},  
        {field: 'status', title: '状态', width: 100}  
    ]]  
});

2.2 步骤二：配置扩展行

EasyUI 的 DataGrid 通过 rowStyler 或自定义事件实现扩展行功能。这里我们采用 onExpandRow 和 onCollapseRow 事件：

$('#dataGrid').datagrid({  
    // ... 其他配置项 ...  
    onExpandRow: function(index, row) {  
        // 获取展开行的 DOM 元素  
        var tr = $(this).datagrid('getRow', index).tr;  
        // 在该行下方插入扩展内容  
        tr.after('<tr class="expanded-row">' +  
            '<td colspan="100%">' +  
            '<div>详细信息：' + row.name + ' 的扩展数据</div>' +  
            '</td>' +  
        '</tr>');  
    },  
    onCollapseRow: function(index, row) {  
        // 移除扩展行内容  
        $(this).datagrid('getRow', index).tr.next('.expanded-row').remove();  
    }  
});

2.3 步骤三：数据绑定与动态加载

扩展行的内容通常需要与行数据动态关联。例如，当用户点击某一行时，可以发起 AJAX 请求获取该行的详细数据：

onExpandRow: function(index, row) {  
    // 发送请求获取详细数据  
    $.get('/api/details/' + row.id, function(data) {  
        // 渲染扩展内容  
        var html = '<div>详细信息：<br/>' +  
            '描述：' + data.description + '<br/>' +  
            '创建时间：' + data.created_at + '</div>';  
        // 插入到表格中  
        $(this).datagrid('getRow', index).tr.after('<tr class="expanded-row"><td colspan="100%">' + html + '</td></tr>');  
    });  
}

三、完整案例：实现联系人管理的扩展行功能

3.1 案例背景

假设我们正在开发一个联系人管理系统，用户希望点击某一行时查看该联系人的详细信息（如地址、公司、备注等）。

3.2 HTML 结构

<!DOCTYPE html>  
<html>  
<head>  
    <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>  
    <div id="contactGrid"></div>  
</body>  
</html>

3.3 JavaScript 配置

$(document).ready(function() {  
    $('#contactGrid').datagrid({  
        url: '/api/contacts', // 假设的后端接口  
        fitColumns: true,  
        rownumbers: true,  
        columns: [[  
            {field: 'id', title: 'ID', width: 80},  
            {field: 'name', title: '姓名', width: 150},  
            {field: 'phone', title: '电话', width: 150},  
            {field: 'email', title: '邮箱', width: 200}  
        ]],  
        onExpandRow: function(index, row) {  
            $.get('/api/contact/' + row.id, function(data) {  
                const expandedRow = `<tr class="expanded-row">  
                    <td colspan="100%">  
                        <div>详细信息：  
                            <p>地址：${data.address}</p>  
                            <p>公司：${data.company}</p>  
                            <p>备注：${data.note}</p>  
                        </div>  
                    </td>  
                </tr>`;  
                $(this).datagrid('getRow', index).tr.after(expandedRow);  
            });  
        },  
        onCollapseRow: function(index, row) {  
            $(this).datagrid('getRow', index).tr.next('.expanded-row').remove();  
        }  
    });  
});

3.4 后端模拟数据（JSON）

// GET /api/contacts  
[  
    {  
        "id": 1,  
        "name": "张三",  
        "phone": "138-1234-5678",  
        "email": "zhangsan@example.com"  
    },  
    // 其他联系人...  
]  

// GET /api/contact/1  
{  
    "address": "北京市朝阳区",  
    "company": "ABC 公司",  
    "note": "技术部主管"  
}

四、扩展技巧与优化

4.1 自定义扩展行模板

可以通过 HTML 模板或 Handlebars.js 等工具，将扩展内容的结构抽象化，避免重复代码：

const expandedTemplate = Handlebars.compile(  
    '<div>详细信息：  
        <p>地址：{{address}}</p>  
        <p>公司：{{company}}</p>  
    </div>'  
);  

// 在 onExpandRow 中使用：  
const html = expandedTemplate(data);

4.2 动态加载与性能优化

懒加载：仅在用户点击时加载详细数据，避免一次性请求大量数据。
缓存数据：将已加载的详细数据缓存至内存，减少重复请求。
虚拟滚动：对于数据量大的场景，结合虚拟滚动技术提升渲染性能。

4.3 样式与交互增强

动画效果：使用 CSS3 过渡（如 transition: height 0.3s）实现平滑展开/折叠。
图标反馈：在行首添加折叠/展开图标（如 icon-expand 和 icon-collapse）。

五、常见问题与解决方案

5.1 问题一：扩展行数据未更新

原因：可能未正确绑定行数据，或后端接口返回数据格式不符。
解决：

检查 row 参数是否包含正确 ID。
使用浏览器开发者工具（F12）查看网络请求是否成功。

5.2 问题二：样式错位或内容溢出

原因：扩展行的 td 元素未正确设置 colspan 或 CSS 样式。
解决：

.expanded-row td {  
    padding: 10px;  
    background-color: #f5f5f5;  
}

5.3 问题三：多行展开导致布局混乱

原因：未正确管理扩展行的生命周期，导致内存泄漏或 DOM 结构异常。
解决：

在 onCollapseRow 中彻底移除扩展行元素。
使用唯一标识符（如 row.id）确保每个行的扩展内容独立。

结论

通过本文的讲解，读者应已掌握如何使用 jQuery EasyUI 数据网格 实现扩展行显示细节的功能。这一功能不仅提升了数据展示的灵活性，还通过减少页面跳转和优化交互流程，显著改善了用户体验。

在实际开发中，开发者可根据具体需求进一步扩展此功能，例如：

嵌套表格：在扩展行中再嵌套一个 DataGrid 展示子级数据。
表单编辑：将扩展行设计为表单区域，允许用户直接修改详细信息。
图表集成：结合 ECharts 等库，在扩展行中展示与当前行关联的可视化数据。

希望本文能成为你探索 EasyUI 功能的起点，未来在构建复杂数据应用时，也能灵活运用这一技巧。

jQuery EasyUI 数据网格 – 扩展行显示细节（建议收藏）

前言

一、基础概念：理解数据网格与扩展行

1.1 数据网格的核心作用

1.2 扩展行的定义与价值

1.3 核心概念对比

二、实现扩展行的核心步骤

2.1 步骤一：初始化数据网格

2.2 步骤二：配置扩展行

2.3 步骤三：数据绑定与动态加载

三、完整案例：实现联系人管理的扩展行功能

3.1 案例背景

3.2 HTML 结构

3.3 JavaScript 配置

3.4 后端模拟数据（JSON）

四、扩展技巧与优化

4.1 自定义扩展行模板

4.2 动态加载与性能优化

4.3 样式与交互增强

五、常见问题与解决方案

5.1 问题一：扩展行数据未更新

5.2 问题二：样式错位或内容溢出

5.3 问题三：多行展开导致布局混乱

结论

最新发布

CSS3 word-break 属性（保姆级教程）

CSS3 word-wrap 属性（一文讲透）

CSS z-index 属性（超详细）

CSS Text(文本)（千字长文）

CSS Fonts(字体)（保姆级教程）

CSS 链接(link)（建议收藏）

CSS 列表（长文讲解）

CSS Table(表格)（建议收藏）

CSS 盒子模型（建议收藏）

CSS Border(边框)（手把手讲解）