项目中经常需要将查找出来的jqGrid表单导出成excel，原先的做法就是跳转到后端然后通过数据库中再查找一次然后用POI导出。

后来需要查找的表格多了一系列问题也就出来了:

1.每次的导出栏不一样都要针对性的对代码进行修改。

2.如果数据查询复杂的话无疑增加了数据库的负担，以及导出的等待时长。

于是我就开始考虑查找js导出的相关插件，网上有关内容相对比较少，但是功夫不负有心人终于让我找到了tableExport，这款插件还支持导出成txt,word,json等数据格式

这原来是在table上使用的放到jqGrid上需要修改一些内容，这款插件是国外人开发的也缺少对中文的支持。所幸最后这些问题都一一解决了。

  1. $("#exportExcel").click(function(){
  2.     var tableid = "list2";//表格ID
  3.     var head = $("#gbox_" + tableid + \' .ui-jqgrid-htable thead\').clone();//克隆表头
  4.     var dom = $("#" + tableid).clone();//克隆表内容
  5.     dom.find(\'.jqgfirstrow\').remove();//干掉多余的无效行
  6.     dom.find(\'tr.ui-search-toolbar\').remove();//干掉搜索框
  7.     dom.find(\'tbody\').before(head);//合并表头和表数据
  8.     dom.tableExport({ type: \'excel\', escape: \'false\' });//导出
  11. })

base64部分，解决编码问题

  1.   // private property
  2.   var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
  3.  
  4.   // private method for UTF-8 encoding
  5.   function utf8Encode(string) {
  6.     string = string.replace(/\r\n/g, "\n");
  7.     var utftext = "";
  8.     for (var n = 0; n < string.length; n++) {
  9.       var c = string.charCodeAt(n);
  10.       if (c < 128) {
  11.         utftext += String.fromCharCode(c);
  12.       }
  13.       else if ((c > 127) && (c < 2048)) {
  14.         utftext += String.fromCharCode((c >> 6) | 192);
  15.         utftext += String.fromCharCode((c & 63) | 128);
  16.       }
  17.       else {
  18.         utftext += String.fromCharCode((c >> 12) | 224);
  19.         utftext += String.fromCharCode(((c >> 6) & 63) | 128);
  20.         utftext += String.fromCharCode((c & 63) | 128);
  21.       }
  22.     }
  23.     return utftext;
  24.   }
  25.  
  26.   function encode(input) {
  27.     var output = "";
  28.     var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
  29.     var i = 0;
  30.     input = utf8Encode(input);
  31.     while (i < input.length) {
  32.       chr1 = input.charCodeAt(i++);
  33.       chr2 = input.charCodeAt(i++);
  34.       chr3 = input.charCodeAt(i++);
  35.       enc1 = chr1 >> 2;
  36.       enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
  37.       enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
  38.       enc4 = chr3 & 63;
  39.       if (isNaN(chr2)) {
  40.         enc3 = enc4 = 64;
  41.       } else if (isNaN(chr3)) {
  42.         enc4 = 64;
  43.       }
  44.       output = output +
  45.           keyStr.charAt(enc1) + keyStr.charAt(enc2) +
  46.           keyStr.charAt(enc3) + keyStr.charAt(enc4);
  47.     }
  48.     return output;
  49.   }
  50.  
  51.   return {
  52.     decode: _decode,
  53.     encode: function (str) {
  54.       return encode(str);
  55.     },
  56.     VERSION: _VERSION
  57.   };

　　新增两个encode方法对UTF-8进行编码，修改return方法。

  1. //console.log($(this).html());
  2. 					var excel="<table>";
  3. 					// Header
  4. 					$(el).find(\'thead\').find(\'tr\').each(function() {
  5. 						excel += "<tr>";
  6. 						$(this).find(\'th\').each(function(index,data) {
  7. 							if ($(this).css(\'display\') != \'none\'){
  8. 								if(defaults.ignoreColumn.indexOf(index) == -1){
  9. 									excel += "<td>" + parseString($(this))+ "</td>";
  10. 								}
  11. 							}
  12. 						});	
  13. 						excel += \'</tr>\';						
  14. 						
  15. 					});					
  16. 					
  17. 					
  18. 					// Row Vs Column
  19. 					var rowCount=1;
  20. 					$(el).find(\'tbody\').find(\'tr\').each(function() {
  21. 						excel += "<tr>";
  22. 						var colCount=0;
  23. 						$(this).find(\'td\').each(function(index,data) {
  24. 							if ($(this).css(\'display\') != \'none\'){	
  25. 								if(defaults.ignoreColumn.indexOf(index) == -1){
  26. 									excel += "<td>"+parseString($(this))+"</td>";
  27. 								}
  28. 							}
  29. 							colCount++;
  30. 						});															
  31. 						rowCount++;
  32. 						excel += \'</tr>\';
  33. 					});					
  34. 					excel += \'</table>\'

　　

  1. $(this).filter(\':visible\').find(\'th\') 中的可见过滤器删掉 ，
  1. 修改成
  1. $(this).find(\'th\')

最后附上我的代码供大家参考，使用的是jqGrid中的新手demo

链接：https://pan.baidu.com/s/1kq7eFoYw5MhpDMo9QINxWQ
提取码：fw1d

 

版权声明：本文为guofx原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/guofx/p/11333710.html