这几天网站改版，吧以前用服务器控件通过后台代码绑定显示数据的模式改成了用JQUERY通过AJAX绑定JQGRID来显示数据，不得不说JQUERY UI确实挺漂亮的，不过UI控件比较少，比如常用的下拉列表控件和LAYOUT布局控件木有啊。。。而且JQGRID显示数据还挺快的，因为期间有用到另一款UI插件，JQUERY EASYUI，EASYUI提供的UI控件就很多了，很喜欢它的LAYOUT控件和MESSAGE消息提示控件，给用户体验非常好，但是该死的DATAGRID控件显示数据那叫一个慢，经常执行着都会弹出系统提示：当前页执行的脚本可能会导致系统变慢，是否停止执行的提示。。。还有TAB控件切换页签那叫一个卡啊。。可能是我在TAB中放了DATAGRID显示数据的原因，，放其他INPUT标签什么的感觉不会太卡勉强可以接受，不过可以吧网页布局的很整齐很简洁，左边TREE右边TAB，我大爱这种布局。但是！！！！！最该死的还不是这些，是竟然EASYUI的THEME竟然会和JQUERY UI的THEME不兼容，同时引用它们的CSS时页面会变乱，比如你用JQUERY UI的accordion做左边菜单，但是你又引用了EASYUI的样式，accordion就会显示的乱七八糟的，于是我淡定了，我心想，漂亮是要付出代价的，于是我抛弃了EASYUI（真的是很舍不得，为什么性能就不能高一点呢,或者不要和JQUERY UI的THEME冲突那该多好）。
好吧，言归正传，说说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 id="HideFrm" style="display: none"></iframe><div id="div_list"><table id="list4"></table></div><button id="export" value="导出">导出</button>那个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了。
当你感到悲哀痛苦时，最好是去学些什么东西。
