jqgrid生成的table如何在前端导出excel

该导出插件不仅限于jqgrid生成的table,也不仅限于导出excel格式的文件,更多的使用方法请查阅相关文档

1.借助第三方库 tableExport

   <script type="text/javascript" src="libs/FileSaver/FileSaver.min.js"></script>
   <script type="text/javascript" src="libs/js-xlsx/xlsx.core.min.js"></script>
   <script type="text/javascript" src="tableExport.min.js"></script>

2.导出按钮绑定事件如下

   $('#btn_export').click(function() {
        var tableid = "table_list";
        var thead = $("#gbox_"+tableid +' .ui-jqgrid-htable thead');
        var ee = $('#'+tableid );
        //合并表头和表数据
        ee.find('tbody').before(thead);
        //底部有合计功能的话,还需要合并底部的tr
        var footer = $('.ui-jqgrid-ftable tbody tr.footrow')
        ee.find('tbody').append(footer)
        //通过完整的table导出excel
        ee.tableExport({
            type:'excel',
            escape:'false',
            fileName: '农业用水管护中心 ',
            ignoreColumn: ['0']
        });
        //将原来的table还原
        var a = $("#"+tableid ).find('thead');
        var _footer = $("#"+tableid ).find('tr.footrow')
        //表头还原
        $("#gbox_"+tableid +' .ui-jqgrid-htable').append(a);
        //底部合并还原
        $("#gbox_"+tableid +' .ui-jqgrid-ftable').append(_footer)
    });
  • 如果是其他的组件生成的table,参考思路使用即可
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容