jQuery EasyUI 数据网格 – 取得选中行数据
在 jQuery EasyUI 的 datagrid 中，获取用户选中的行数据是非常常见的操作，用于编辑、删除、查看详情等功能。下面详细介绍几种常用方法，根据单选/多选模式的不同而异。
官方参考：
- DataGrid 文档：https://www.jeasyui.com/documentation/datagrid.php
- 获取选中行示例：https://www.jeasyui.com/tutorial/datagrid/datagrid21.php
步骤 1: 创建一个基本的 DataGrid
<table id="dg" class="easyui-datagrid" title="用户列表" style="width:700px;height:400px"
data-options="url:'get_users.php',fitColumns:true,pagination:true,rownumbers:true">
<thead>
<tr>
<th field="ck" checkbox="true"></th> <!-- 多选时使用复选框 -->
<th field="id" width="80">ID</th>
<th field="name" width="100">姓名</th>
<th field="email" width="200">邮箱</th>
<th field="phone" width="120">电话</th>
</tr>
</thead>
</table>
<!-- 操作按钮 -->
<div style="margin:10px 0;">
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" onclick="getSelectedRow()">获取单选行</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-sum" onclick="getSelectedRows()">获取多选行</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-tip" onclick="showSelected()">显示选中数据</a>
</div>步骤 2: JavaScript 获取选中行数据
<script type="text/javascript">
var selectedData = null; // 存储选中的数据
// 方法1：获取单选模式下的选中行（返回单个对象或 null）
function getSelectedRow() {
var row = $('#dg').datagrid('getSelected'); // 核心方法
if (row) {
selectedData = row;
$.messager.alert('选中行', '您选中了：' + row.name + ' (ID: ' + row.id + ')');
console.log('单选行数据：', row);
} else {
$.messager.alert('提示', '请先选择一行！');
}
}
// 方法2：获取多选模式下的所有选中行（返回数组，可能为空）
function getSelectedRows() {
var rows = $('#dg').datagrid('getSelections'); // 核心方法（注意是复数）
if (rows.length > 0) {
selectedData = rows;
$.messager.alert('选中行数', '您共选中了 ' + rows.length + ' 行');
console.log('多选行数据：', rows);
} else {
$.messager.alert('提示', '请至少选择一行！');
}
}
// 方法3：获取选中行的索引（常用于定位）
function getRowIndex() {
var row = $('#dg').datagrid('getSelected');
if (row) {
var index = $('#dg').datagrid('getRowIndex', row); // 获取行索引
console.log('选中行索引：', index);
}
}
// 示例：显示选中数据（结合上面两种）
function showSelected() {
var rows = $('#dg').datagrid('getSelections');
if (rows.length == 0) {
$.messager.alert('提示', '没有选中任何行！');
return;
}
var names = [];
for (var i = 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）获取选中节点，请继续提问！
