jqGrid数据导出

最新推荐文章于 2021-01-16 06:14:03 发布

小屋有雪有水挺好

最新推荐文章于 2021-01-16 06:14:03 发布

阅读量516

点赞数

本文链接：https://blog.youkuaiyun.com/qq_43679720/article/details/86745049

版权

本文介绍了一种使用JavaScript实现jqGrid表格数据导出为CSV文件的方法，包括关键函数`getXlsFromTbl`、`getTblData`、`getExcelFileName`和`doFileExport`的详细说明，以及如何在HTML页面中应用这些函数进行数据导出。通过设置参数，可以控制是否包含行号，并能自动生成带有时间戳的文件名。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原文：http://blog.youkuaiyun.com/xiao_jun_0820/article/details/6622210

言归正传，说说jqGrid数据导出的实现，我也纳闷，JQGRID这么复杂的TABLE都做出来了，为啥就不能给我们这些懒人实现一个导出数据的方法呢，百度狗狗了很久都没找到，只能自己写了。下面就吧我写的JS共享出来

[javascript] view plain copy

function getXlsFromTbl(inTblId, inTblContainerId, title, rownumbers) {
try {
var allStr = "";
var curStr = "";
//alert("getXlsFromTbl");
if (inTblId != null && inTblId != "" && inTblId != "null") {
curStr = getTblData($('#' + inTblId), $('#' + inTblContainerId), rownumbers);
}
if (curStr != null) {
allStr += curStr;
}
else {
alert("你要导出的表不存在！");
return;
}
var fileName = getExcelFileName(title);
doFileExport(fileName, allStr);
}
catch (e) {
alert("导出发生异常:" + e.name + "->" + e.description + "!");
}
}
function getTblData(curTbl, curTblContainer, rownumbers) {
var outStr = "";
if (curTbl != null) {
var rowdata = curTbl.getRowData();
var Lenr = 1;
for (i = 0; i < Lenr; i++) {
//var Lenc = curTbl.rows(i).cells.length;
var th;
if (rownumbers == true) {
th = curTblContainer.find('TH:not(:first-child)');
}
else {
th = curTblContainer.find('TH');
}
th.each(function(index, element) {
//alert($(element).text());
//取得每行的列数
var j = index + 1;
var content = $(element).text();
//alert(j + "|" + content);
outStr += content + "\t";
//赋值
});
outStr += "\r\n";
}
var tmp = "";
for (i = 0; i < rowdata.length; i++) {
var row = eval(rowdata[i]);
for (each in row) {
outStr += row[each] + "\t";
}
outStr += "\r\n";
}
}
else {
outStr = null;
alert(inTbl + "不存在!");
}
return outStr;
}
function getExcelFileName(title) {
var d = new Date();
var curYear = d.getYear();
var curMonth = "" + (d.getMonth() + 1);
var curDate = "" + d.getDate();
var curHour = "" + d.getHours();
var curMinute = "" + d.getMinutes();
var curSecond = "" + d.getSeconds();
if (curMonth.length == 1) {
curMonth = "0" + curMonth;
}
if (curDate.length == 1) {
curDate = "0" + curDate;
}
if (curHour.length == 1) {
curHour = "0" + curHour;
}
if (curMinute.length == 1) {
curMinute = "0" + curMinute;
}
if (curSecond.length == 1) {
curSecond = "0" + curSecond;
}
var fileName = title + "_" + curYear + curMonth + curDate + "_"
+ curHour + curMinute + curSecond + ".csv";
//alert(fileName);
return fileName;
}
function doFileExport(inName, inStr) {
var xlsWin = null;
if (!!document.all("HideFrm")) {
xlsWin = HideFrm;
}
else {
var width = 6;
var height = 4;
var openPara = "left=" + (window.screen.width / 2 - width / 2)
+ ",top=" + (window.screen.height / 2 - height / 2)
+ ",scrollbars=no,width=" + width + ",height=" + height;
xlsWin = window.open("", "_blank", openPara);
}
xlsWin.document.write(inStr);
xlsWin.document.close();
xlsWin.document.execCommand('Saveas', true, inName);
xlsWin.close();
}

用法是这样的，HTML的BODY中必须有这些元素

[html] view plain copy

<iframe id="HideFrm" style="display: none"></iframe>

<div id="div_list">
        <table id="list4">
        </table>
</div>
<button id="export" value="导出">导出</button>

[html] view plain copy

那个iframe可要可不要，不要的话导出的时候会弹出一个网页窗口，要的话比较有好一点，反正是display: none的。table是你要转换为jqGrid的,必须要有一个DIV包裹住这个TABLE，因为导出中要取TABLE的列名要用到。然后对button写一个click事件调用getXlsFromTbl这个方法执行导出就好了

[javascript] view plain copy

$('#export').click(function() {
                var title = "供应信息";
                getXlsFromTbl('list4', 'div_list', title, true)
            });

[html] view plain copy

getXlsFromTbl有四个参数：第一个参数是要转换成JQGRID的table的ID，第二个参数是包裹这个table的DIV的ID，第三个是用来拼接导出文件名的,第四个参数是指示是否JQGRID显示了rownumbers，就是最前面那一串序号123456什么的。如果你的JQGRID参数设置了rownumber:true,那这边参数就填true,反之同理,否则导出的的文件列会对歪一列.

再分享一下我老师大神的人工智能教程吧。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://blog.youkuaiyun.com/jiangjunshow