jqgrid实现客户端导出Excel、txt、word、json等数据格式的文件

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);

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