BootStrapTable的TableExport数据导出插件的使用

TableExport数据导出插件的使用

要想实现表格数据的导出，我们可以使用bootstrap的扩展插件Table Export来实现我们的需求。
即：bootstrap-table-export.js

由于数据导出功能是BootStrapTable的功能的扩展，而且插件依赖于tableExport.jquery.plugin中的tableExport.js。

关于tableExport.jquery.plugin详情可查看：tableExport github地址

该插件可实现多种数据文件格式的导出：
这里写图片描述

但需要注意的是：
1. js文件导入顺序：
这里写图片描述

2.依赖问题：注意依赖最低版本号
这里写图片描述
开始使用

1.导入所对应js，尤其注意顺序：tableExport.js在上，bootstrap-table-export.js在下。

关于${ctxPath}，模板引擎beetl中含有的参数，具体请看beetl文档。beetl官方文档

<script src="${ctxPath}/static/js/plugins/tableExport.jquery.plugin-master/tableExport.js"/>
<script src="${ctxPath}/static/js/plugins/bootstrap-table/extensions/export/bootstrap-table-export.js"/>

2.BsTable构建参数中添加对应属性

//是否显示导出按钮
showExport: true,
//导出表格方式（默认basic：只导出当前页的表格数据；all：导出所有数据；selected：导出选中的数据）
exportDataType: "basic",
//导出文件类型
exportTypes: ['json', 'xml', 'csv', 'txt', 'sql', 'excel']

官方说明：bootstrap-table-export官方说明

这里写图片描述

3.设置数据导出范围下拉框

 <div class="col-sm-2" style="padding-top: 10px">
     <span id="exportToolbar" style="display: inline-block" class="btn-group">
         <select id="sel_exportoption" class="form-control">
             <option value="">导出当前页数据</option>
             <option value="all">导出全部数据</option>
             <option value="selected">导出选中数据</option>
         </select>
     </span>
 </div>

4. 设置下拉框选择事件，选中后就将对应属性设置到表格exportDataType中

<script type="text/javascript">
    $("#sel_exportoption").change(function () {
        //刷新参数设置
        $('#DataQueryTable').bootstrapTable('refreshOptions', {
            exportDataType: $(this).val()
        });
    });
</script>

5. 测试数据导出

这里写图片描述

以CSV格式为例：选择下拉框数据导出方式，选择导出数据类型

这里写图片描述

6. 导出数据多余”on”列处理

将生成文件保存后打开：
这里写图片描述

发现多余的数据列：on

解决方案：这就用到上述为提到的一个表格配置参数：exportOptions

打开bootstrap-table-export.js，定位到exportOptions，添加下述代码即可解决。

$.extend($.fn.bootstrapTable.defaults, {
        showExport: false,
        exportDataType: 'basic', // basic, all, selected
        // 'json', 'xml', 'png', 'csv', 'txt', 'sql', 'doc', 'excel', 'powerpoint', 'pdf'
        exportTypes: ['json', 'xml', 'csv', 'txt', 'sql', 'excel'],
        exportOptions: {
            // 导出数据去除第一列出现"on"
            ignoreColumn: [0]
        }
    });

7.关于导出文件命名问题

导出文件的命名不设置会采取默认的：tableExport.xxx命名，这个也是可以变更的。

坐标：tableExport.js

这里写图片描述

8.导出表格数据科学计数法问题

坐标：tableExport.js

这里写图片描述

BootStrapTable的TableExport数据导出插件的使用

猜你喜欢