下面我将为您详细讲解“jqGrid 表格数据导出实例”的完整攻略。
一、简介
jqGrid 是基于 jQuery 的一款能够呈现和编辑数据表格的插件。它可以在网页上方便地实现可分页、可排序、列的过滤等功能,并支持丰富的前端事件和样式定制。本文重点介绍 jqGrid 的数据导出功能实现。
二、环境搭建
使用 jqGrid 前,需要下载 jqGrid 的 JS 和 CSS 文件,并且需要引入 jQuery。
下面是一个简单的页面示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jqGrid 示例</title>
<link rel="stylesheet" href="/path/to/jquery-ui.css">
<link rel="stylesheet" href="/path/to/ui.jqgrid.css">
<script src="/path/to/jquery.js"></script>
<script src="/path/to/jquery-ui.js"></script>
<script src="/path/to/jquery.jqgrid.js"></script>
</head>
<body>
<table id="myGrid"></table>
<div id="myPager"></div>
<script>
$(function () {
$("#myGrid").jqGrid({
url: '/path/to/data.json',
datatype: 'json',
colModel: [
{name: 'id', index: 'id', width: 60, sorttype: "int"},
{name: 'name', index: 'name', width: 100},
{name: 'amount', index: 'amount', width: 80, align: "right", sorttype: "float"},
{name: 'price', index: 'price', width: 80, align: "right", sorttype: "float"},
{name: 'total', index: 'total', width: 80, align: "right", sorttype: "float"},
{name: 'note', index: 'note', width: 150, sortable: false}
],
rowNum: 10,
rowList: [10, 20, 30],
pager: '#myPager',
sortname: 'id',
viewrecords: true,
sortorder: "desc",
caption: "数据表格示例"
});
});
</script>
</body>
</html>
上面的代码中,我们使用 $("#myGrid").jqGrid(options);
初始化了一个数据表格,其中:
url
是 table 的请求地址;datatype
指定了数据类型,这里为 JSON;colModel
是列模型,定义了表格的列名和特性;rowNum
是默认每页行数;rowList
是每页行数的下拉列表;pager
是分页工具栏;sortname
是默认排序列;viewrecords
显示表格的总记录数;sortorder
是默认排序方式;caption
是表格标题。
三、数据导出
在表格上面添加一个“导出”按钮,点击该按钮即可导出表格中的数据。下面是具体实现过程。
- 定义导出按钮
<button id="exportBtn">导出</button>
- 添加导出事件
$("#exportBtn").click(function () {
var postData = $("#myGrid").jqGrid("getGridParam", "postData");
// 新建表格
var $table = $("<table>");
// 添加表头
var $thead = $("<thead>").append("<tr><th>ID</th><th>名称</th><th>数量</th><th>价格</th><th>总价</th><th>备注</th></tr>").appendTo($table);
// 添加表身
$.ajax({
url: "/path/to/export.php",
type: "post",
dataType: "json",
data: postData,
success: function (data) {
var $tbody = $("<tbody>");
$.each(data.rows, function (i, row) {
var $tr = $("<tr>");
$("<td>").text(row.id).appendTo($tr);
$("<td>").text(row.name).appendTo($tr);
$("<td>").text(row.amount).appendTo($tr);
$("<td>").text(row.price).appendTo($tr);
$("<td>").text(row.total).appendTo($tr);
$("<td>").text(row.note).appendTo($tr);
$tr.appendTo($tbody);
});
$tbody.appendTo($table);
// 调用表格导出函数
exportExcel($table);
}
});
});
在上面的代码中,我们通过 $.ajax()
将当前表格的 postData
发送到服务端,获取表体数据,并按“ID”、“名称”、“数量”、“价格”、“总价”、“备注”的顺序填充到表格中。最后将整个表格传递给 exportExcel()
函数进行导出。
- 表格导出函数
function exportExcel($table) {
var uri = 'data:application/vnd.ms-excel;base64,';
// 获取表头和表身数据,按照“ID-名称-数量-价格-总价-备注”的顺序组合
var ctx = {worksheet: "", table: $table.html()};
var base64 = function(s) {
return window.btoa(unescape(encodeURIComponent(s)));
};
// 文件名为当前日期
var today = new Date();
var name = "Table-" + today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate() + ".xls";
// 下载表格
var link = document.createElement("a");
link.download = name;
link.href = uri + base64(ctx.table);
link.click();
}
在上面的代码中,我们通过 window.btoa()
将数据进行 base64 编码,并定义了一个 ctx
变量来存储表头和表身数据。然后创建一个 <a>
标签来下载该表格。
四、示例说明
示例一
假如我们需要按照“名称”来对表格数据进行排序,并导出按照该排序筛选的表格数据,那么代码如下:
$(function () {
$("#myGrid").jqGrid({
url: '/path/to/data.json',
datatype: 'json',
colModel: [
{name: 'id', index: 'id', width: 60, sorttype: "int"},
{name: 'name', index: 'name', width: 100},
{name: 'amount', index: 'amount', width: 80, align: "right", sorttype: "float"},
{name: 'price', index: 'price', width: 80, align: "right", sorttype: "float"},
{name: 'total', index: 'total', width: 80, align: "right", sorttype: "float"},
{name: 'note', index: 'note', width: 150, sortable: false}
],
rowNum: 10,
rowList: [10, 20, 30],
pager: '#myPager',
sortname: 'name',
viewrecords: true,
sortorder: "asc",
caption: "数据表格示例"
});
$("#exportBtn").click(function () {
var postData = $("#myGrid").jqGrid("getGridParam", "postData");
// 新建表格
var $table = $("<table>");
// 添加表头
var $thead = $("<thead>").append("<tr><th>ID</th><th>名称</th><th>数量</th><th>价格</th><th>总价</th><th>备注</th></tr>").appendTo($table);
// 添加表身
$.ajax({
url: "/path/to/export.php",
type: "post",
dataType: "json",
data: postData,
success: function (data) {
var $tbody = $("<tbody>");
$.each(data.rows, function (i, row) {
var $tr = $("<tr>");
$("<td>").text(row.id).appendTo($tr);
$("<td>").text(row.name).appendTo($tr);
$("<td>").text(row.amount).appendTo($tr);
$("<td>").text(row.price).appendTo($tr);
$("<td>").text(row.total).appendTo($tr);
$("<td>").text(row.note).appendTo($tr);
$tr.appendTo($tbody);
});
$tbody.appendTo($table);
// 调用表格导出函数
exportExcel($table);
}
});
});
});
示例二
假如我们需要只显示“名称为 A 或 B”的数据行,并导出该表格数据,那么我们需要修改上述代码中的 postData
:
$("#exportBtn").click(function () {
var postData = $("#myGrid").jqGrid("getGridParam", "postData");
postData.filters = '{ "groupOp": "OR", "rules": [ { "field": "name", "op": "eq", "data": "A" }, { "field": "name", "op": "eq", "data": "B" } ] }';
// 新建表格
var $table = $("<table>");
// ...
});
注意,filters
是字符串类型的 JSON 数据,它指定了表格数据的过滤规则。示例中,我们将这个值设为了“名称为 A 或 B”的记录。需要注意的是,groupOp
为“OR”表示“或”关系,可以将多个“rules”行程“与”关系或“或”关系组合出不同的过滤条件,具体请参考 jqGrid 的文档。
五、总结
本文介绍了如何使用 jqGrid 导出数据表格,同时附带了示例代码来帮助读者更好的理解 jqGrid 的使用。欢迎大家在实践过程中提出问题,我们将竭尽所能给予帮助。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:jqgrid 表格数据导出实例 - Python技术站