一、需求：在我们日常工作的时候，对数据的导出有需求。比如导出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种方式添加导出功能！！