异常教程
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）是一个功能强大的组件，它允许开发者以表格形式展示大量数据，并支持排序、分页、过滤等操作。然而，当用户在数据网格中选中某一行时，如何快速获取该行的数据，是许多开发者在实际项目中需要解决的核心问题。
本文将从基础概念入手，逐步讲解如何通过 jQuery EasyUI 的 API 取得选中行数据，并结合实际案例演示操作流程。无论你是编程初学者还是有一定经验的开发者，都能通过本文掌握这一实用技能。
一、理解数据网格与选中行
1.1 数据网格的定义与作用
数据网格（DataGrid）类似于 Excel 表格，它将数据以行和列的形式展示，每一行代表一条记录，每一列对应数据的某个字段。例如，一个用户管理界面可能包含“姓名”“年龄”“邮箱”等列，而每一行则对应一个用户的详细信息。
选中行数据指的是用户通过鼠标点击或键盘操作选择的某一行数据。在实际应用中，获取选中行的数据是许多业务逻辑的基础，例如：
- 点击“编辑”按钮时，需要获取选中行的用户 ID 以加载详细信息。
- 删除操作前，需要确认用户选中的是哪一行数据。
1.2 选中行数据的意义
选中行数据的获取是交互设计的关键环节。它直接影响用户操作的反馈速度和准确性。例如，如果用户误删了一行数据，系统需要快速定位到该行的原始信息以便恢复。因此，掌握这一技能对提升用户体验至关重要。
二、核心方法：获取选中行的 API
2.1 jQuery EasyUI 的核心 API
jQuery EasyUI 提供了以下两个核心方法，用于获取数据网格中的选中行数据：
getSelections()：返回所有选中行的数组。getSelected()：返回当前选中的第一行数据（当多选模式未启用时）。
方法对比表格
| 方法名 | 返回值类型 | 适用场景 |
|---|---|---|
getSelections() | 数组（Array） | 需要获取多行选中的数据时 |
getSelected() | 对象（Object） | 只需获取单行数据时 |
2.2 方法调用的语法
假设数据网格的 ID 是 dg，则：
// 获取所有选中的行数据
var selectedRows = $('#dg').datagrid('getSelections');
// 获取当前选中的第一行数据
var selectedRow = $('#dg').datagrid('getSelected');
2.3 方法调用的注意事项
- 多选模式：默认情况下，数据网格的多选功能是关闭的。若需启用多选，需在初始化时设置
rownumbers: true或checkbox: true。 - 数据绑定时机：若数据网格尚未加载数据，调用方法可能返回空值。
三、实战案例：获取选中行数据
3.1 案例场景
假设我们需要开发一个用户管理界面，用户可以通过点击“删除”按钮删除选中的用户。此时，我们需要：
- 在数据网格中展示用户列表。
- 当用户点击“删除”按钮时，获取选中行的用户 ID。
3.2 HTML 结构
<table id="userGrid" class="easyui-datagrid"
style="width:800px;height:400px"
url="/api/users"
title="用户列表"
rownumbers="true"
pagination="true"
singleselect="false">
<thead>
<tr>
<th field="id" width="50">ID</th>
<th field="name" width="100">姓名</th>
<th field="email" width="200">邮箱</th>
<th field="age" width="50">年龄</th>
</tr>
</thead>
</table>
<button id="deleteBtn">删除选中用户</button>
3.3 JavaScript 实现
$(function() {
// 初始化数据网格
$('#userGrid').datagrid({
onLoadSuccess: function() {
// 数据加载完成后，可执行其他操作
}
});
// 绑定删除按钮的点击事件
$('#deleteBtn').click(function() {
// 获取所有选中的行
var selectedRows = $('#userGrid').datagrid('getSelections');
if (selectedRows.length === 0) {
alert("请至少选择一行数据！");
return;
}
// 遍历选中行，获取 ID 列表
var ids = [];
for (var i = 0; i < selectedRows.length; i++) {
ids.push(selectedRows[i].id);
}
// 发送删除请求（此处为模拟）
alert("将删除以下用户 ID：" + ids.join(", "));
// 实际项目中应调用 AJAX 请求
});
});
3.4 关键点解析
- 多选模式：通过设置
singleselect="false"允许用户多选。 - 数据验证：在删除前检查是否选中了数据，避免空操作。
- 数据提取：通过遍历
selectedRows数组，提取需要的字段（如id）。
四、进阶技巧：处理复杂场景
4.1 动态更新数据后获取选中行
在数据网格动态更新（如过滤或刷新）后，需重新绑定事件或重新获取数据。例如：
// 刷新数据后重新获取选中行
$('#userGrid').datagrid('reload').datagrid('selectRecord', 123); // 选中 ID 为 123 的行
4.2 结合其他功能：编辑与删除
若需在选中行后触发编辑弹窗，可结合 EasyUI 的 getRowIndex() 方法定位行索引：
// 获取选中行的索引
var index = $('#userGrid').datagrid('getRowIndex', selectedRow);
// 显示编辑窗口
$('#editWindow').window('open').form('load', selectedRow);
4.3 处理跨浏览器兼容性
在旧版浏览器中，某些方法可能返回 undefined。可通过以下方式增强兼容性：
var selectedRow = $('#dg').datagrid('getSelected') || {};
五、常见问题与解决方案
5.1 问题 1：无法获取选中行数据
原因：
- 数据网格未正确初始化。
- 未启用多选模式（当需要多选时）。
解决方案：
// 确保初始化参数正确
$('#dg').datagrid({
singleselect: false // 允许多选
});
5.2 问题 2：获取的是空数组或空对象
原因：
- 用户未选中任何行。
- 数据未加载完成（如异步请求未完成）。
解决方案：
// 添加数据加载完成的回调
$('#dg').datagrid({
onLoadSuccess: function(data) {
if (data.total === 0) {
alert("无数据可选！");
}
}
});
结论：掌握数据交互的核心能力
通过本文的讲解，开发者可以系统地掌握 jQuery EasyUI 数据网格 – 取得选中行数据 的方法与技巧。从基础 API 到实战案例，再到进阶场景的处理，我们逐步构建了完整的知识体系。
在实际项目中，这一技能可以广泛应用于：
- 用户权限管理（如批量删除或禁用账户）。
- 数据可视化（如选中行后生成图表）。
- 表单联动（如选中行后自动填充表单字段）。
希望本文能帮助你快速解决开发中的实际问题，并为更复杂的前端项目打下坚实基础。如果在学习过程中遇到疑问，欢迎在评论区交流！