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

秒速五厘米 2022-06-15 04:16 305阅读 0赞

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

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

![20180211193707913][]

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

看下导出的具体效果吧。

![20180211193722302][]

![20180211193746732][]

![20180211193805564][]

其实简单就是给导出按钮下面的选项绑定事件，调用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);

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

[20180211193707913]: /images/20220615/ac5a34c1dc2649c2afdba19dd89452be.png
[20180211193722302]: /images/20220615/598367016fd04be38254590c67f8b1c0.png
[20180211193746732]: /images/20220615/d3928839bfd448e294a7b66a090441f2.png
[20180211193805564]: /images/20220615/26ecf881921b4a9ba92ea3aa641b7064.png

发表评论取消回复

表情：

评论列表（有 0 条评论，305人围观）

还没有评论，来说两句吧...

相关阅读

相关 TCP客户端的嵌入式实现：基于嵌入式系统的TCP客户端设计与实现

嵌入式系统在现代科技中扮演着重要角色，它们广泛应用于各个领域，包括物联网、工业自动化和智能设备等。其中，嵌入式TCP客户端是与服务器进行通信的重要组件。本文将介绍如何设计和实现

川长思鸟来/ 2023年10月16日 13:56/ 0 赞/ 43 阅读

相关 PostgreSQL数据库导入、导出dmp格式的数据

今天我们分享win环境PostgreSQL数据库导入、导出dmp格式的数据，同时也会顺带说一下linux环境操作dmp格式的数据操作，思路都是一致的。首先确定我们win环境

以你之姓@/ 2023年10月08日 22:57/ 0 赞/ 79 阅读

相关输出Tecplot格式的数据文件

Tecplot输出文件格式如果想将你的云图数据输出，对于整块的块状结构数据，我的输出方法如下： include <fstream> string fi

た入场券/ 2023年07月22日 09:05/ 0 赞/ 25 阅读

相关 java 导出 pdf 格式的文件

首先添加依赖，版本要一致，这里是个坑，不然会出现字体无法识别的情况 <!-- https://mvnrepository.com/artifact/com.it

偏执的太偏执、/ 2022年12月27日 11:13/ 0 赞/ 231 阅读

相关 java jqgrid demo下载_jqgrid+java 导出文件（excel）

Jqgrid+java 导出，demo为导出excel文件 1. 准备前台下载图标 //为grid添加自定义按钮——导出Excel $.fn.export2Excel=

布满荆棘的人生/ 2022年11月03日 11:44/ 0 赞/ 175 阅读

相关【JqGrid】JqGrid单元格合并及表头列合并，jqgrid单元格合并

1、合并单元格代码示例 ![Center][] 表头列合并代码： ![SouthEast][] 效果图 ![SouthEast 1][]

超、凢脫俗/ 2022年07月14日 04:55/ 0 赞/ 754 阅读

相关【JqGrid】jqgrid合并单元格

1、jqgrid官方的事件和方法 [http://www.trirand.com/jqgridwik ... %5B%5D=gridcomplete][http_www.t

川长思鸟来/ 2022年07月14日 04:55/ 0 赞/ 337 阅读

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

jqgrid插件貌似没有提供导出数据功能，项目以前有用bootstrap-table，有个相应的导出表格数据插件bootstrap-table-export，后面项目将所有的b

秒速五厘米/ 2022年06月15日 04:16/ 0 赞/ 306 阅读

相关 Java之csv格式的Excel文件导出

public class CsvUtil { private static final Logger logger = LoggerFactory.ge

Love The Way You Lie/ 2022年05月30日 11:58/ 0 赞/ 245 阅读

相关 mid、mif文件转shapefile、geojson等格式的数据

mif/mid文件说明 mid、mif文件是Mapinfo用来存储空间数据的一种格式，mif文件保存了地图的属性表结构和空间信息（点、线、面），mid文件则按照mif文件

系统管理员/ 2021年09月22日 02:08/ 0 赞/ 638 阅读