一、需求：在我們日常工作的時候，對數據的導出有需求。比如導出JSON、XML、SQL等形式。方便我們日常使用。
二、組件：我們可以使用bootstrap的擴展插件Table Export來實現我們的需求。
官方地址：http://bootstrap-table.wenzhixin.net.cn/zh-cn/extensions/
代碼地址：https://github.com/wenzhixin/bootstrap-table/tree/master/src/extensions/export
效果：
可以選擇導出當前頁、選中列。所有數據。
選中列導出，有個問題：對於chekbox列 導出的數據有on，目前沒有解決。
三：
js導入：
1 <!--JAVASCRIPT--> 2 <script src="/static/js/jquery-2.1.1.min.js"></script> 3 4 5 <script src="/static/export/boot/bootstrap-table.min.js"></script> 6 <script src="/static/export/boot/bootstrap.min.js"></script> 7 8 9 <script src="/static/export/boot/bootstrap-table-export.js"></script> 10 <script src="/static/export/boot/tableExport.js"></script> 11 <script src="/static/export/boot/ga.js"></script>
因為導出功能是bootstrap table的功能的擴展。所以需要使用bootstrap table的一些js和css。
css導入：
1 <link href="/static/css/bootstrap.min.css" rel="stylesheet"> 2 3 <!--Font Awesome [ OPTIONAL ]--> 4 <link href="/static/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet"> 5 6 7 <!--Bootstrap Select [ OPTIONAL ]--> 8 <link href="/static/plugins/bootstrap-select/bootstrap-select.min.css" rel="stylesheet"> 9 10 11 <!--Bootstrap Table [ OPTIONAL ]--> 12 <link href="/static/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet"> 13 14 15 <!--X-editable [ OPTIONAL ]--> 16 {# <link href="/static/plugins/x-editable/css/bootstrap-editable.css" rel="stylesheet">#} 17 18 19 <!--Demo [ DEMONSTRATION ]--> 20 <link href="/static/css/demo/nifty-demo.min.css" rel="stylesheet">
html代碼：
1 <div class="panel"> 2 {# <div class="panel-heading">#} 3 {# <h3 class="panel-title">服務器信息展示</h3>#} 4 {# </div>#} 5 6 7 8 9 <!-------------> 10 11 <div class="panel-body"> 12 13 14 15 16 17 18 <table id="table" data-toggle="table" 19 data-url="/cmdb_back_data/" 20 21 data-show-export="true" 22 data-toolbar="#toolbar" 23 data-click-to-select="true" 24 data-checkbox="true" 25 data-click-to-select="true" 26 data-show-columns="true" 27 data-search="true" 28 data-data-type="json" 29 data-show-refresh="true" 30 data-show-toggle="true" 31 data-show-columns="true" 32 data-sort-name="id" 33 data-page-list="[10, 30, 100, All]" 34 data-page-size="10" 35 {# data-side-pagination="server"#} 36 data-pagination="true" data-show-pagination-switch="true"> 37 <!---------------> 38 <div class="container"> 39 {# <h4>數據導出類型</h4>#} 40 <span id="toolbar" style="display: inline-block"> 41 <select class="form-control"> 42 <option value="">導出當前頁數據</option> 43 <option value="all">導出全部數據</option> 44 {# <option value="selected">導出選中數據</option>#} 45 </select> 46 </span> 47 </div> 48 <!---------------> 49 <thead> 50 <tr> 51 {# <th data-checkbox="true" data-select-item-name="選中" ></th>#} 52 <th data-field="id" data-sortable="true" >ID</th> 53 <th data-field="docker_ip" data-sortable="true">容器IP</th> 54 <th data-field="server_ip" data-sortable="true" >服務器IP</th> 55 <th data-field="department" data-align="center" data-sortable="true" data-sorter="priceSorter">所屬部門</th> 56 <th data-field="app_name" data-align="center" data-sortable="true" >所屬應用</th> 57 <th data-field="app_owner" data-align="center" data-sortable="true" >應用負責人</th> 58 </tr> 59 </thead> 60 </table> 61 </div> 62 </div> 63 <!--===================================================-->
js代碼：
1 var $table = $('#table'); 2 $(function () { 3 $('#toolbar').find('select').change(function () { 4 $table.bootstrapTable('destroy').bootstrapTable({ 5 exportDataType: $(this).val() 6 }); 7 }); 8 })
注意：bootstrap table實現有2種方法：
1、列中寫對應的data屬性，比如上面。
2、js實現。
可以看官網：
http://bootstrap-table.wenzhixin.net.cn/zh-cn/getting-started/
如上需要注意：
1 data-show-export="true"
或者：
1 showExport: true, 2 exportDataType: "basic",
2種方式添加導出功能！！