<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui/themes/icon.css">
<script type="text/javascript" src="jquery-easyui/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui/jquery.easyui.min.js"></script>
</head>
<body>
<table id="datagrid" title="DataGrid" style="width:400px;height:250px;">
<thead>
<tr>
<th field="id" width="50">ID</th>
<th field="name" width="150">Name</th>
<th field="age" width="50">Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Doe</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Jane Doe</td>
<td>30</td>
</tr>
</tbody>
</table>
<script>
$(function(){
$('#datagrid').datagrid({
onClickRow: function(rowIndex, rowData){
// 在单击行时触发,你可以在这里获取选中行的数据
alert('Selected ID: ' + rowData.id + ', Name: ' + rowData.name + ', Age: ' + rowData.age);
}
});
});
</script>
</body>
</html>
在上述代码中,通过在 datagrid 的配置项中使用 onClickRow 事件,在单击行时触发。在事件处理函数中,可以使用 getSelected 方法获取选中行的数据。 rowData 参数即为选中行的数据,你可以根据需求进行相应的操作,例如弹出提示框显示选中行的信息。
如果你需要在按钮点击等其他事件中获取选中行的数据,你可以使用 getSelected 方法。例如:
var selectedRow = $('#datagrid').datagrid('getSelected');
if (selectedRow) {
alert('Selected ID: ' + selectedRow.id + ', Name: ' + selectedRow.name + ', Age: ' + selectedRow.age);
} else {
alert('No row selected.');
}
上述代码中,getSelected 方法返回第一个被选中的行的数据。如果没有选中行,返回 null。
转载请注明出处:http://www.zyzy.cn/article/detail/13104/jQuery EasyUI