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

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

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

java导出excel与word文档
导出excel与word 依赖如下 <dependency><groupId>co ...
使用EasyPoi根据模板导出Excel或word文档
接着上篇文章 Java根据模板导出Excel并生成多个Sheet 简单介绍下EasyPoi的使用,直接上代码吧首先当然是先引入jar包了,看下图其次,还是贴代码吧看实例,下面是根据模板导出的工具类 ...
php ligerui 导出excel,asp.net+Ligerui实现grid导出Excel和Word的方法
本文实例讲述了asp.net+Ligerui实现grid导出Excel和Word的方法.分享给大家供大家参考,具体如下: 下面采用的导EXCEL方法,适合不翻页的grid,而且无需再读一次数据库,对于 ...
Java导出Excel和Word
1.导出word a.打开需要导出的word模板,另存为xml文件 b.java中使用 //生成word文件 public void downWordAcceptRegist(HttpServletR ...
在.NET环境下将报表导出Excel和Word
在VB.NET同样可以将报表导出到Excel和Word进行输出,制作出专业水平的报表.具体操作如下:(注:首先需添加引用,选择COM-->选择Microsoft Word Object Libr ...
.net 导出excel和word
导出Word: private void Button13_Click(object sender, System.EventArgs e) { this. ...
Java导出Excel或word jsp页面直接转的方式
2.jsp页面直接转成Excel或是word方式: 首先,在web.xml上添加上告诉浏览器该资源的媒体类型: <mime-mapping><extension>doc< ...
EasyOffice-.NetCore一行代码导入导出Excel,生成Word
Excel和Word操作在开发过程中经常需要使用,这类工作不涉及到核心业务,但又往往不可缺少.以往的开发方式在业务代码中直接引入NPOI.Aspose或者其他第三方库,工作繁琐,耗时多,扩展性差--比 ...
导出excel、word、csv文件方法汇总
excel文件主要是输出html代码.以xls的文本格式保存文件. 生成excel格式的代码: [code lang="CSharp"] /// <summary> / ...

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

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

最新文章

热门文章