bootstrap组件-导出数据

一、需求：在我们日常工作的时候，对数据的导出有需求。比如导出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导入：

     <!--JAVASCRIPT-->
     <script src="/static/js/jquery-2.1.1.min.js"></script>

     <script src="/static/export/boot/bootstrap-table.min.js"></script>
     <script src="/static/export/boot/bootstrap.min.js"></script>

     <script src="/static/export/boot/bootstrap-table-export.js"></script>
     <script src="/static/export/boot/tableExport.js"></script>
     <script src="/static/export/boot/ga.js"></script>

因为导出功能是bootstrap  table的功能的扩展。所以需要使用bootstrap table的一些js和css。

css导入：

 <link href="/static/css/bootstrap.min.css" rel="stylesheet">

     <!--Font Awesome [ OPTIONAL ]-->
     <link href="/static/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet">

     <!--Bootstrap Select [ OPTIONAL ]-->
     <link href="/static/plugins/bootstrap-select/bootstrap-select.min.css" rel="stylesheet">

     <!--Bootstrap Table [ OPTIONAL ]-->
     <link href="/static/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">

     <!--X-editable [ OPTIONAL ]-->
 {#    <link href="/static/plugins/x-editable/css/bootstrap-editable.css" rel="stylesheet">#}

     <!--Demo [ DEMONSTRATION ]-->
     <link href="/static/css/demo/nifty-demo.min.css" rel="stylesheet">

html代码：

                     <div class="panel">
 {#                        <div class="panel-heading">#}
 {#                            <h3 class="panel-title">服务器信息展示</h3>#}
 {#                        </div>#}

                         <!------------->

                         <div class="panel-body">

                             <table  id="table" data-toggle="table"
                                    data-url="/cmdb_back_data/"

                                    data-show-export="true"
                                    data-toolbar="#toolbar"
                                    data-click-to-select="true"
                                    data-checkbox="true"
                                     data-click-to-select="true"
                                     data-show-columns="true"
                                    data-search="true"
                                    data-data-type="json"
                                    data-show-refresh="true"
                                    data-show-toggle="true"
                                    data-show-columns="true"
                                    data-sort-name="id"
                                    data-page-list="[10, 30, 100, All]"
                                    data-page-size=""
 {#                                   data-side-pagination="server"#}
                                    data-pagination="true" data-show-pagination-switch="true">
                                 <!--------------->
                                 <div class="container">
 {#                                 <h4>数据导出类型</h4>#}
                                 <span id="toolbar" style="display: inline-block">
                                 <select class="form-control">
                                     <option value="">导出当前页数据</option>
                                     <option value="all">导出全部数据</option>
 {#                                    <option value="selected">导出选中数据</option>#}
                                 </select>
                                 </span>
                                     </div>
                                 <!--------------->
                                 <thead>
                                     <tr>
 {#                                        <th  data-checkbox="true"      data-select-item-name="选中" ></th>#}
                                         <th data-field="id" data-sortable="true" >ID</th>
                                         <th data-field="docker_ip" data-sortable="true">容器IP</th>
                                         <th data-field="server_ip" data-sortable="true" >服务器IP</th>
                                         <th data-field="department" data-align="center" data-sortable="true" data-sorter="priceSorter">所属部门</th>
                                         <th data-field="app_name" data-align="center" data-sortable="true" >所属应用</th>
                                         <th data-field="app_owner" data-align="center" data-sortable="true" >应用负责人</th>
                                     </tr>
                                 </thead>
                             </table>
                         </div>
                     </div>
                     <!--===================================================-->

js代码：

         var $table = $('#table');
         $(function () {
             $('#toolbar').find('select').change(function () {
                 $table.bootstrapTable('destroy').bootstrapTable({
                     exportDataType: $(this).val()
                 });
             });
         })

注意：bootstrap table实现有2种方法：

1、列中写对应的data属性，比如上面。

2、js实现。

可以看官网：

http://bootstrap-table.wenzhixin.net.cn/zh-cn/getting-started/

如上需要注意：

 data-show-export="true"

或者：

             showExport: true,
             exportDataType: "basic",

2种方式添加导出功能！！