在使用 jQuery EasyUI 构建后台管理系统时,经常需要从数据网格中提取用户选中的行数据。本文通过 getSelected 与 getSelections 两个核心方法,演示如何准确获取单行或多行记录,并提供可直接运行的代码示例,帮助开发者快速集成到实际项目中。
数据网格获取选中行的两种方法
jQuery EasyUI 的 DataGrid 组件提供了两个用于检索选中行数据的 API:
getSelected:返回第一个被选中的行数据。若未选中任何行,则返回null;否则返回对应的记录对象。getSelections:返回所有被选中行的数据,结果为一个包含多条记录的数组。若无选中项,则返回空数组。
这两个方法适用于不同的交互需求:单行操作用 getSelected,批量处理则依赖 getSelections。
创建基础数据网格结构
首先通过 HTML 标记初始化一个 DataGrid 实例,配置数据源、尺寸与列定义:
Item ID
Product ID
List Price
Unit Cost
Attribute
Status
该表格通过 url 属性加载 JSON 数据,列字段与 field 属性一一对应,确保后续能正确读取行数据。

获取选中行数据的实际用法
获取第一个选中行
调用 getSelected 方法可快速提取当前选中的单条记录,常用于查看详情或编辑操作:
var row = $('#tt').datagrid('getSelected');
if (row) {
alert('Item ID: ' + row.itemid + "\nPrice: " + row.listprice);
}若用户未选择任何行,row 将为 null,因此需进行空值判断以避免运行时错误。
获取所有选中行的指定字段
当需要批量处理时,使用 getSelections 遍历数组提取所需字段:
var ids = [];
var rows = $('#tt').datagrid('getSelections');
for (var i = 0; i < rows.length; i++) {
ids.push(rows[i].itemid);
}
alert(ids.join('\n'));该示例收集所有选中行的 itemid,并以换行分隔输出,适用于批量删除、导出或状态更新等场景。
使用注意事项与常见场景
- 空值处理:调用
getSelected前务必检查返回值是否为null,否则访问属性会抛出异常。 - 多选模式配置:若需支持多行选择,需在 DataGrid 初始化时设置
singleSelect: false,否则getSelections最多只返回一行。 - 性能优化:当数据量较大时,避免在循环中频繁操作 DOM,建议先提取所需字段再统一处理。
- 典型应用场景:表单联动填充、批量审批、数据导出、行级权限校验等均可基于选中行数据实现。
掌握这两个方法后,可灵活应对大多数基于 DataGrid 的交互需求,提升前端数据处理效率。

