bootstrap組件-導出數據

1、需求：在咱們平常工做的時候，對數據的導出有需求。好比導出JSON、XML、SQL等形式。方便咱們平常使用。

2、組件：咱們能夠使用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種方法：

一、列中寫對應的data屬性，好比上面。

二、js實現。

能夠看官網：

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

如上須要注意：

1 data-show-export="true"

 

或者：

1             showExport: true,
2             exportDataType: "basic",

 

2種方式添加導出功能！！