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导入：

 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种方式添加导出功能！！

转载于:https://www.cnblogs.com/evilliu/p/6424237.html