jqgrid插件貌似没有提供导出数据功能，项目以前有用bootstrap-table，有个相应的导出表格数据插件bootstrap-table-export，后面项目将所有的bootstrap-table换成jqgrid表格也想把之前的导出功能移过来。后面去读bootstrap-table-export插件源码发现 作者其实是简单封装另外一个插件 tableExport.js插件。后面网上一搜发现这个插件挺强大的。

我们可以将这个功能集成到jqgrid插件里面去或者集成到项目中的某个js，值得注意的是jqgrid表格中有些数据是我们不需要的。tableExport.js这个插件是导出当前页的数据也就是所见即所得，如要导出表格所有数据那就得自己写后台代码在实现了。先看一下可以导出那些类型。

除了导出png、PPT格式和PDF导出不行，其他的都能正常导出来。

看下导出的具体效果吧。

其实简单就是给导出按钮下面的选项绑定事件，调用tableExport.js导出方法，还有就是注意jqgrid表格里面的内容有些是不必要导出的。

下面贴下代码：

var TYPE_NAME = {
						        json: 'JSON',
						        xml: 'XML',
						        png: 'PNG',
						        csv: 'CSV',
						        txt: 'TXT',
						        sql: 'SQL',
						        doc: 'MS-Word',
						        excel: 'MS-Excel',
						        powerpoint: 'MS-Powerpoint',
						        pdf: 'PDF'
						};
						var $menu = $('<div class="export btn-group" style="margin-left:2px;"><button class="btn btn-default dropdown-toggle" title="导出数据" data-toggle="dropdown" type="button" aria-expanded="false"><i class="glyphicon glyphicon-export icon-share"></i> <span class="caret"></span>导出</button><ul class="dropdown-menu" role="menu"></ul></div>');
						//var $menu = $('<div class="export btn-group" style="margin-left:2px;"><button class="btn btn-default " title="导出数据" type="button" ><i class="glyphicon glyphicon-export icon-share"></i> </span>导出</button></div>');
						var exportTypes = ['txt','excel','json','xml','png','csv','sql','doc','pdf','powerpoint'];
						var tempStr = "";
						for(var i = 0;i < exportTypes.length;i++){
							tempStr += '<li data-type="'+exportTypes[i]+'"><a href="javascript:void(0)">'+TYPE_NAME[exportTypes[i]]+'</a></li>';
						}
						//<li data-type="json"><a href="javascript:void(0)">JSON</a></li><li data-type="xml"><a href="javascript:void(0)">XML</a></li><li data-type="csv"><a href="javascript:void(0)">CSV</a></li><li data-type="txt"><a href="javascript:void(0)">TXT</a></li><li data-type="sql"><a href="javascript:void(0)">SQL</a></li><li data-type="excel"><a href="javascript:void(0)">MS-Excel</a></li>
						$menu.find("ul.dropdown-menu").html(tempStr);
						
						$menu.find("li").click(function () {
		                    var type = $(this).data('type');
		                    var doExport = function () {
			        				var idStr = $($t).attr('id');
			        				var dd = $("#gbox_"+idStr+' .ui-jqgrid-htable thead').clone();//找到<thead>
			        				var ee = $('#'+idStr).clone();
			        				ee.find('.jqgfirstrow').remove();//干掉多余的无效行
			        				ee.find('tbody').before(dd);//合并表头和表数据
			        				ee.find('tr.ui-search-toolbar').remove();//干掉搜索框
			        				ee.tableExport({type:type,escape:'false'});
		                        };
		                   doExport();
						});
						//导出按钮的构建
						$(p.toolbar).find('.jqgrid-export').replaceWith($menu);

某些东西掌握思想就够了，然后灵活应用到项目中去。