说说jqGrid数据导出的实现,JQGRID这么复杂的TABLE都做出来了,为啥就不能给我们这些懒人实现一个导出数据的方法呢,百度狗狗了很久都没找到,只能自己写了。下面就吧我写的JS共享出来
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中必须有这些元素
那个iframe可要可不要,不要的话导出的时候会弹出一个网页窗口,要的话比较有好一点,反正是display: none的。table是你要转换为jqGrid的,必须要有一个DIV包裹住这个TABLE,因为导出中要取TABLE的列名要用到。然后对button写一个click事件调用getXlsFromTbl这个方法执行导出就好了
$('#export').click(function() { var title = "供应信息"; getXlsFromTbl('list4', 'div_list', title, true) });
getXlsFromTbl有四个参数:第一个参数是要转换成JQGRID的table的ID,第二个参数是包裹这个table的DIV的ID,第三个是用来拼接导出文件名的,第四个参数是指示是否JQGRID显示了rownumbers,就是最前面那一串序号123456什么的。如果你的JQGRID参数设置了rownumber:true,那这边参数就填true,反之同理,否则导出的的文件列会对歪一列.
JQGRID怎么加载数据网上就一大堆了,JQGRID API也写的很详细,这里就不会说了,大家自己去BAIDU了。