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);
某些東西掌握思想就夠了，然后靈活應用到項目中去。

總結

以上是生活随笔為你收集整理的jqgrid实现客户端导出Excel、txt、word、json等数据格式的文件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。