jQuery EasyUI 数据网格 - 取得选中行数据
jQuery EasyUI 数据网格 - 取得选中行数据
简介
jQuery EasyUI 数据网格是一款实用的前端数据展示插件。它支持数据分页、排序、筛选、编辑、删除等操作，极大地简化了数据展示的工作。在使用数据网格时，取得选中行数据是常见的需求。本文将详细介绍如何取得选中行数据。
代码实现
要取得选中行数据，我们可以借助EasyUI数据网格提供的方法 getSelections。该方法可以返回所有选中行的数据，我们只需要遍历这些数据即可取得单个选中行的数据。下面是实现代码：
// 获取选中行数据
var rows = $("#datagrid").datagrid("getSelections");
// 遍历选中行数据
$.each(rows, function(index, row) {
console.log(row.field1); // 取得字段1数据
console.log(row.field2); // 取得字段2数据
// ...
});
在上面的代码中，#datagrid 是数据网格的HTML元素ID，"getSelections" 是要调用的方法名。此方法可以返回选中行的数组。
实战演练
为了方便演示，我们准备了一个数据网格，包含了多个列，其中一个列是勾选框列，可以被勾选。下面是页面代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery EasyUI 数据网格 - 取得选中行数据</title>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/jquery-easyui/themes/bootstrap/easyui.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-easyui/jquery.easyui.min.js"></script>
</head>
<body>
<table id="datagrid" class="easyui-datagrid"
data-options="url:'data.json',toolbar:'#toolbar',pagination:true,singleSelect:false">
<thead>
<tr>
<th data-options="field:'ck',checkbox:true"></th>
<th data-options="field:'id',sortable:true">编号</th>
<th data-options="field:'name',sortable:true">姓名</th>
<th data-options="field:'gender',sortable:true">性别</th>
<th data-options="field:'age',sortable:true">年龄</th>
</tr>
</thead>
</table>
<div id="toolbar">
<a href="#" class="easyui-linkbutton" iconCls="icon-save" onclick="getSelections()">取得选中行数据</a>
</div>
</body>
</html>
在上面的代码中，我们引入了EasyUI的样式和脚本文件，并创建了一个数据网格。该数据网格包含了一个勾选框列，可以被勾选。数据源是一个data.json 文件。为了演示方便，我们在这里提供 data.json 文件的内容：
[
{"id":1,"name":"张三","gender":"男","age":18},
{"id":2,"name":"李四","gender":"男","age":19},
{"id":3,"name":"王五","gender":"女","age":20},
{"id":4,"name":"赵六","gender":"男","age":21},
{"id":5,"name":"钱七","gender":"女","age":22}
]
为表格添加勾选框列是通过field:'ck',checkbox:true设置实现的。我们还添加了工具栏，包含了一个按钮 “取得选中行数据”，在单击该按钮时，将触发 getSelections 方法，取得所有选中行数据。
下面是实现代码：
// 点击"取得选中行数据"按钮时，取得所有选中行数据
function getSelections() {
// 获取选中行数据
var rows = $("#datagrid").datagrid("getSelections");
// 遍历选中行数据
$.each(rows, function(index, row) {
console.log(row.id); // 取得ID数据
console.log(row.name); // 取得姓名数据
console.log(row.gender); // 取得性别数据
console.log(row.age); // 取得年龄数据
});
}
在上面的代码中，我们为"取得选中行数据"按钮绑定了一个点击事件getSelections，当按钮被单击时，将通过#datagrid取得数据网格元素，然后调用datagrid("getSelections")方法取得所有选中行数据，最后遍历选中行数据，取得每行的各列数据。
总结
本文主要介绍了如何在 jQuery EasyUI 数据网格中取得选中行数据。我们通过getSelections方法取得了所有选中行的数据，通过遍历选中行数组，取得了单个选中行的各列数据。同时，本文通过一个实战案例，进一步提升了读者的实践能力，希望对读者了解和掌握 jQuery EasyUI 数据网格有所帮助。