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 数据网格有所帮助。