jQuery EasyUI 数据网格 - 取得选中行数据
jQuery EasyUI 数据网格 - 取得选中行数据
在jQuery EasyUI的datagrid中，获取用户选中的行数据是非常常见的操作，用于编辑、删除、查看详情等功能。下面详细介绍几种常用方法，根据单选/多选模式的不同而异。
官方参考：
- DataGrid 文档：https://www.jeasyui.com/documentation/datagrid.php
- 获取选中行示例：https://www.jeasyui.com/tutorial/datagrid/datagrid21.php
步骤 1: 创建一个基本的 DataGrid
<tableid="dg"class="easyui-datagrid"title="用户列表"style="width:700px;height:400px"data-options="url:'get_users.php',fitColumns:true,pagination:true,rownumbers:true"><thead><tr><thfield="ck"checkbox="true"></th><!-- 多选时使用复选框 --><thfield="id"width="80">ID</th><thfield="name"width="100">姓名</th><thfield="email"width="200">邮箱</th><thfield="phone"width="120">电话</th></tr></thead></table><!-- 操作按钮 --><divstyle="margin:10px 0;"><ahref="javascript:void(0)"class="easyui-linkbutton"iconCls="icon-edit"onclick="getSelectedRow()">获取单选行</a><ahref="javascript:void(0)"class="easyui-linkbutton"iconCls="icon-sum"onclick="getSelectedRows()">获取多选行</a><ahref="javascript:void(0)"class="easyui-linkbutton"iconCls="icon-tip"onclick="showSelected()">显示选中数据</a></div>步骤 2: JavaScript 获取选中行数据
<scripttype="text/javascript">varselectedData=null;// 存储选中的数据// 方法1：获取单选模式下的选中行（返回单个对象或 null）functiongetSelectedRow(){varrow=$('#dg').datagrid('getSelected');// 核心方法if(row){selectedData=row;$.messager.alert('选中行','您选中了：'+row.name+' (ID: '+row.id+')');console.log('单选行数据：',row);}else{$.messager.alert('提示','请先选择一行！');}}// 方法2：获取多选模式下的所有选中行（返回数组，可能为空）functiongetSelectedRows(){varrows=$('#dg').datagrid('getSelections');// 核心方法（注意是复数）if(rows.length>0){selectedData=rows;$.messager.alert('选中行数','您共选中了 '+rows.length+' 行');console.log('多选行数据：',rows);}else{$.messager.alert('提示','请至少选择一行！');}}// 方法3：获取选中行的索引（常用于定位）functiongetRowIndex(){varrow=$('#dg').datagrid('getSelected');if(row){varindex=$('#dg').datagrid('getRowIndex',row);// 获取行索引console.log('选中行索引：',index);}}// 示例：显示选中数据（结合上面两种）functionshowSelected(){varrows=$('#dg').datagrid('getSelections');if(rows.length==0){$.messager.alert('提示','没有选中任何行！');return;}varnames=[];for(vari=0;i<rows.length;i++){names.push(rows[i].name);}$.messager.alert('选中用户','您选中了：'+names.join(', '));}// 事件监听：行选中时自动触发（可选）$(function(){$('#dg').datagrid({singleSelect:false,// false 为多选模式（默认 false）// singleSelect: true, // true 为单选模式onSelect:function(index,row){console.log('选中第 '+index+' 行：',row);},onUnselect:function(index,row){console.log('取消选中第 '+index+' 行：',row);},onSelectAll:function(rows){console.log('全选：',rows);},onUnselectAll:function(rows){console.log('取消全选');}});});</script>关键方法总结
| 方法 | 返回值 | 说明 | 适用模式 |
|---|---|---|---|
$('#dg').datagrid('getSelected') | 对象 或 null | 获取当前单选行（多选模式下只返回最后选中行） | 单选/多选 |
$('#dg').datagrid('getSelections') | 数组（可能为空 []） | 获取所有选中行（推荐多选时使用） | 多选优先 |
$('#dg').datagrid('getRowIndex', row) | 数字（索引） | 根据行对象获取其在表格中的索引 | 单选/多选 |
$('#dg').datagrid('selectRow', index) | - | 程序化选中某行 | - |
$('#dg').datagrid('clearSelections') | - | 清空所有选中 | - |
注意事项
- 单选模式：设置
singleSelect: true，此时getSelected最合适。 - 多选模式：默认或
singleSelect: false，必须加复选框列<th field="ck" checkbox="true"></th>，使用getSelections。 - 事件：
onSelect、onUnselect等可实时监听选中变化。 - 远程数据：无论数据来自
url还是静态表格，这些方法都适用。
实际应用示例
- 编辑按钮：
var row = $('#dg').datagrid('getSelected'); if(row){ edit(row.id); } - 批量删除：
var rows = $('#dg').datagrid('getSelections'); if(rows.length>0){ deleteBatch(rows); }
如果需要结合 dialog 编辑选中行、批量操作、或树形网格（treegrid）获取选中节点，请继续提问！