给出一个导出Jqgrid表格为EXCEL文档的完整HTML代码
时间: 2024-02-01 14:13:04 浏览: 26
以下是一个简单的示例,可以将 jqGrid 中的数据导出为 Excel 文档:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导出 jqGrid 到 Excel</title>
<!-- 引入 jQuery、jqGrid 和导出插件的 CSS 文件 -->
<link rel="stylesheet" href="//cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.css">
<link rel="stylesheet" href="//cdn.bootcss.com/free-jqgrid/4.15.2/css/ui.jqgrid.min.css">
<link rel="stylesheet" href="//cdn.bootcss.com/jQuery-File-Download/1.4.2/css/jquery.fileDownload.css">
<!-- 引入 jQuery 和 jqGrid 的 JS 文件 -->
<script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="//cdn.bootcss.com/free-jqgrid/4.15.2/jquery.jqgrid.min.js"></script>
<!-- 引入导出插件的 JS 文件 -->
<script src="//cdn.bootcss.com/jQuery-File-Download/1.4.2/js/jquery.fileDownload.min.js"></script>
<script>
$(function() {
// 创建 jqGrid 表格
$("#myGrid").jqGrid({
url: "data.json",
mtype: "GET",
datatype: "json",
colModel: [
{ label: "序号", name: "id", key: true, width: 75 },
{ label: "姓名", name: "name", width: 150 },
{ label: "年龄", name: "age", width: 150 },
{ label: "性别", name: "gender", width: 150 },
{ label: "职业", name: "job", width: 150 },
],
height: 250,
rowNum: 20,
pager: "#pager",
viewrecords: true,
caption: "示例 jqGrid",
});
// 导出按钮点击事件
$("#exportBtn").click(function() {
// 获取表格数据并转换为 JSON 对象
var data = $("#myGrid").jqGrid("getRowData");
// 发送 POST 请求到后端,下载 Excel 文档
$.fileDownload("export.php", {
httpMethod: "POST",
data: {
data: JSON.stringify(data),
},
});
});
});
</script>
</head>
<body>
<!-- jqGrid 表格 -->
<table id="myGrid"></table>
<div id="pager"></div>
<!-- 导出按钮 -->
<button id="exportBtn">导出 Excel</button>
</body>
</html>
```
需要注意的是,上面的代码中有一行 `url: "data.json"`,它指定了 jqGrid 表格的数据来源。在实际项目中,你需要根据需要替换成自己的数据接口。
另外还需要编写一个用于导出 Excel 文档的后端脚本,以下是 PHP 版本的示例:
```php
<?php
// 从 POST 请求中获取表格数据
$data = json_decode($_POST["data"], true);
// 创建 Excel 文档
$filename = "export.xlsx";
$spreadsheet = new \PhpOffice\PhpSpreadsheet\Spreadsheet();
$sheet = $spreadsheet->getActiveSheet();
// 设置表头
$columns = array_keys($data[0]);
foreach ($columns as $i => $column) {
$sheet->setCellValueByColumnAndRow($i + 1, 1, $column);
}
// 填充数据
$row = 2;
foreach ($data as $i => $item) {
foreach ($columns as $j => $column) {
$sheet->setCellValueByColumnAndRow($j + 1, $row, $item[$column]);
}
$row++;
}
// 输出 Excel 文件
$writer = new \PhpOffice\PhpSpreadsheet\Writer\Xlsx($spreadsheet);
header("Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
header("Content-Disposition: attachment; filename=\"$filename\"");
$writer->save("php://output");
```
上面的 PHP 脚本使用了 `PhpOffice\PhpSpreadsheet` 库来创建 Excel 文档。如果你使用其他语言,可以使用相应的库来完成同样的任务。