jqGrid导出excel

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

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

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

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

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

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

贴上效果图

js代码

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


})

修改了一部分源码

base64部分，解决编码问题

  // private property
  var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";

  // private method for UTF-8 encoding
  function utf8Encode(string) {
    string = string.replace(/\r\n/g, "\n");
    var utftext = "";
    for (var n = 0; n < string.length; n++) {
      var c = string.charCodeAt(n);
      if (c < 128) {
        utftext += String.fromCharCode(c);
      }
      else if ((c > 127) && (c < 2048)) {
        utftext += String.fromCharCode((c >> 6) | 192);
        utftext += String.fromCharCode((c & 63) | 128);
      }
      else {
        utftext += String.fromCharCode((c >> 12) | 224);
        utftext += String.fromCharCode(((c >> 6) & 63) | 128);
        utftext += String.fromCharCode((c & 63) | 128);
      }
    }
    return utftext;
  }

  function encode(input) {
    var output = "";
    var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
    var i = 0;
    input = utf8Encode(input);
    while (i < input.length) {
      chr1 = input.charCodeAt(i++);
      chr2 = input.charCodeAt(i++);
      chr3 = input.charCodeAt(i++);
      enc1 = chr1 >> 2;
      enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
      enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
      enc4 = chr3 & 63;
      if (isNaN(chr2)) {
        enc3 = enc4 = 64;
      } else if (isNaN(chr3)) {
        enc4 = 64;
      }
      output = output +
          keyStr.charAt(enc1) + keyStr.charAt(enc2) +
          keyStr.charAt(enc3) + keyStr.charAt(enc4);
    }
    return output;
  }

  return {
    decode: _decode,
    encode: function (str) {
      return encode(str);
    },
    VERSION: _VERSION
  };

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

//console.log($(this).html());
					var excel="<table>";
					// Header
					$(el).find('thead').find('tr').each(function() {
						excel += "<tr>";
						$(this).find('th').each(function(index,data) {
							if ($(this).css('display') != 'none'){
								if(defaults.ignoreColumn.indexOf(index) == -1){
									excel += "<td>" + parseString($(this))+ "</td>";
								}
							}
						});	
						excel += '</tr>';						
						
					});					
					
					
					// Row Vs Column
					var rowCount=1;
					$(el).find('tbody').find('tr').each(function() {
						excel += "<tr>";
						var colCount=0;
						$(this).find('td').each(function(index,data) {
							if ($(this).css('display') != 'none'){	
								if(defaults.ignoreColumn.indexOf(index) == -1){
									excel += "<td>"+parseString($(this))+"</td>";
								}
							}
							colCount++;
						});															
						rowCount++;
						excel += '</tr>';
					});					
					excel += '</table>'

　　

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

修改成

$(this).find('th') 

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

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