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

效果：

bootstrap组件-导出数据

可以选择导出当前页、选中列。所有数据。

选中列导出，有个问题：对于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种方式添加导出功能！！

秒客网

bootstrap组件-导出数据

相关文章