jQuery EasyUI 数据网格获取选中行数据的方法与示例

在使用 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 的交互需求，提升前端数据处理效率。