游乐游手机版
首页/前端开发/文章详情

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

时间:2026-08-31 12:43
本文介绍如何在 jQuery EasyUI 数据网格(DataGrid)中获取选中行数据。通过 getSelected 和 getSelections 两种方法,结合完整 HTML 与 JavaScript 示例,帮助开发者快速实现单行与多行数据提取,适用于表单提交、批量操作等常见业务场景。

在使用 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 属性一一对应,确保后续能正确读取行数据。

jQuery EasyUI 数据网格界面示例

获取选中行数据的实际用法

获取第一个选中行

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

来源:https://www.runoob.com/jeasyui/jeasyui-datagrid-datagrid3.html
上一篇jQuery EasyUI DataGrid 添加查询功能完整教程 下一篇jQuery EasyUI 数据网格:将 HTML 表格转换为 DataGrid 的完整指南
本站内容用于信息整理与展示,如有侵权或内容问题请及时联系处理。

相关推荐

补充同频道和同主题内容,方便继续浏览更多相关内容。

同类最新

继续查看同栏目最近更新的文章。

更多
CSS3入门指南:常用特性解析与实战练习路径
前端开发 · 2026-09-01

CSS3入门指南:常用特性解析与实战练习路径

CSS3是现代网页开发的核心技术,涵盖圆角、阴影、渐变、过渡、动画及响应式布局等高频特性。本文梳理了CSS3的核心应用场景、分步学习路径与综合练习案例,帮助初学者快速建立从基础排版到现代交互的完整开发思路,并规避常见样式陷阱。

CSS border 边框属性详解:语法、拆分写法与常见问题排查
前端开发 · 2026-09-01

CSS border 边框属性详解:语法、拆分写法与常见问题排查

本文系统讲解CSS标准边框属性border的完整语法结构,涵盖简写与拆分写法、单边控制技巧及border-radius配合方案。针对边框不显示、元素尺寸异常等高频问题提供排查路径,帮助开发者快速掌握边框设置规范并提升界面视觉一致性。

CSS3动画属性有哪些:常用属性与用法说明
前端开发 · 2026-09-01

CSS3动画属性有哪些:常用属性与用法说明

CSS3动画主要分为transition过渡与animation关键帧两类。本文梳理常用属性、简写语法与@keyframes规则,结合悬停、入场、循环等场景给出代码示例与选型建议,帮助开发者快速写出流畅且可控的动画效果。

CSS3渐变色语法与常见用法
前端开发 · 2026-09-01

CSS3渐变色语法与常见用法

CSS3渐变色通过纯代码生成平滑颜色过渡,广泛用于按钮、横幅与卡片背景。本文系统梳理线性与径向渐变的核心语法、方向控制、停靠点设置及多层叠加技巧,提供可直接复用的场景代码,并给出兼容性策略与常见渲染异常排查方法,帮助开发者快速构建稳定、可维护的渐变样式。

CSS3手册中文版下载指南:获取渠道、筛选标准与使用建议
前端开发 · 2026-09-01

CSS3手册中文版下载指南:获取渠道、筛选标准与使用建议

寻找CSS3手册中文版下载资源时,如何判断来源可靠性、筛选高质量内容并有效使用?本文从获取渠道、版本识别、下载验收到替代方案,提供一套可执行的判断标准,帮助你快速找到适合学习或查阅的中文手册。