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