• 新的表格展示利器 Bootstrap Table Ⅰ

     1.bootstrap table简介及特征

           Bootstrap Table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等功能。其官方网站地址 为：http://bootstrap-table.wenzhixin.net.cn/。里面可以下载使用所需的JS和CSS文件，以及参考文档和例子。

           Bootstrap Table具有如下功能：

    • 支持 Bootstrap 3 和 Bootstrap 2
    • 自适应界面
    • 固定表头
    • 非常丰富的配置参数
    • 直接通过标签使用
    • 显示/隐藏列
    • 显示/隐藏表头
    • 通过 AJAX 获取 JSON 格式的数据
    • 支持排序
    • 格式化表格
    • 支持单选或者多选
    • 强大的分页功能
    • 支持卡片视图
    • 支持多语言
    • 支持插件

    2.Bootstrap Table使用

    去官网下载需要的表格插件和扩展的导出插件放入项目中：

    本次测试还包括了PDF导出，在引用导出插件时，页面需要引用的样式文件如下：

    <!-- JQuery 导出扩展引用 -->
<script src="${basePath}/js/jquery.min.js"></script>
<!-- bootstrap table css --> 
   <link rel="stylesheet" href="<%=bizpath%>/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" 
href="/bizmodules/adminlte/bootstrap_extension/bootstrap-table-develop/dist/bootstrap-table.css">
<script src="/bizmodules/adminlte/bootstrap_extension/bootstrap-table-develop/dist/bootstrap-table.min.js"></script>
<script src="/bizmodules/adminlte/bootstrap_extension/bootstrap-table-develop/dist/locale/bootstrap-table-zh-CN.js"></script>
<script src="/bizmodules/adminlte/bootstrap_extension/bootstrap-table-develop/dist/extensions/export/bootstrap-table-export.js"></script>
<!-- pdf 导出扩展引用 -->
<script src="/bizmodules/adminlte/bootstrap_extension/tableExport/libs/pdfmake/pdfmake.min.js"></script>
<script src="/bizmodules/adminlte/bootstrap_extension/tableExport/libs/pdfmake/vfs_fonts.js"></script>
<script type="text/javascript" src="/bizmodules/adminlte/bootstrap_extension/tableExport/libs/FileSaver/FileSaver.min.js"></script>
<script type="text/javascript" src="/bizmodules/adminlte/bootstrap_extension/tableExport/libs/jsPDF/jspdf.min.js"></script>
<script type="text/javascript" src="/bizmodules/adminlte/bootstrap_extension/tableExport/libs/jsPDF-AutoTable/jspdf.plugin.autotable.js"></script>
<script type="text/javascript" src="/bizmodules/adminlte/bootstrap_extension/tableExport/tableExport.js"></script>
<!-- pdf 导出扩展引用 -->

    除了BootStrap Table的插件引用外，也需要在项目中引用Bootstrap基本的js,css文件和JQuery的js文件。

    3.Bootstrap Table效果

    引用项目所需的样式文件后，在业务模块的应用效果如下：

    • 服务端分页设置：在配置文件中设置分页方式为服务器分页。 
      sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
      pageNumber: 1,                       //初始化加载第一页，默认第一页
      pageSize: 20,                       //每页的记录行数（*）
      pageList: [20, 30, 40],
    • 格式化数据列：如给对应数据列内容设置背景颜色，采用formatter提供的函数设置。格式化功能可处理时间样式，特殊数据样式和特殊行背景样式。对于当列数据，也可做数据的运算，拼接处理。如原值为10，可设置value展示值为20。官方提供方法如下：
       {
         align: "left",
         halign: "left",
         field: "price",
         // 100,
         sortable:true,
         title: "原值(万元)",
         formatter: function (value) {
            return "<span class='badge bg-orange'  style='padding:5px 10px;'>" + value + "</span>";
          }
        },
    formatter data-formatter Function undefined 格式化单元格内容，function(value, row, index), value：该cell本来的值，row：该行数据，index：该行序号（从0开始）
    footerFormatter data-footer-formatter Function undefined 格式化footer内容，





    • 导出文件：设置表格可导出文件。
         exportDataType: "all",   //导出文件方式  支持: 'basic', 'all', 'selected'. basic：本页数据，all，获取服务器所有数据，selected,本页选择行数据
         showExport: true,  //是否显示导出按钮
         buttonsAlign:"right",  //按钮位置
         exportTypes:[ 'csv', 'txt', 'sql', 'doc', 'excel', 'xlsx', 'pdf'],  //导出文件支持: 'json', 'xml', 'png', 'csv', 'txt', 'sql'，'doc', 'excel', 'xlsx', 'pdf'
         Icons:'glyphicon-export',//导出文件图标
         导出到excel文件中的效果如下 ：

    •  视图切换：切换数据的展示效果由表格变为视图，该功能对数据列较多时，可设置为试图模式，方便用户查看明显数据，设置表格参数如下： 
      showToggle:true,                    //是否显示详细视图和列表视图的切换按钮
         切换效果如下：

    • 显示列设置：提供用户设置，需要展示的列数据。在导出时，只导出设置显示的列内容。

              

    4.Bootstrap Table 数据绑定

    ajax data-ajax Function undefined 自定义 AJAX 方法,须实现 jQuery AJAX API
    method data-method String ‘get’ 服务器数据的请求方式 ‘get’ or ‘post’
    url data-url String undefined 服务器数据的加载地址

    Bootstrap Table做数据绑定时，可以直接设置url请求后台数据，也可通过ajax加载数据。本文通过ajax加载数据的方式如下：

     1  doSearch: function () {
 2         var params={};
 3         params.start=1;
 4         params.limit=20;
 5         // MP.doAction（）函数为封装的ajax请求后台数据的函数，数据从后台请求成功后，通过load函数，加载数据。
 6         MP.doAction("base-car-query", params, function (datas) {
 7             if(datas.success)
 8             {    //数据绑定 ，datas为json格式的数据
 9                 $("#tb_departments").bootstrapTable('load', datas);
10             }
11         }, function(datas){
12             alert("数据加载失败");
13         }, true, true);
14     }

    5.Bootstrap Bable 分页

    sidePagination data-side-pagination String ‘client’

    设置在哪里进行分页，可选值为 ‘client’ 或者 ‘server’。

    设置 ‘server’时，必须设置 服务器数据地址（url）或者重写ajax方法

    Bootstap Table设置了两种分页模式，即客户端分页和服务器分页。在服务器分页时，若设置了url数据请求地址，则可直接分页。若通过ajax加载的数据，需要传送分页参数到后台，重新加载数据，在分页时重新发送ajax请求的触发事件如下：

    onPageChange page-change.bs.table number, size 更改页码或页面大小时触发. 
     1  loadCharts: function ()
 2         var me = this;
 3         var tb_departments = $("#tb_departments").bootstrapTable({
 4            // 表格属性设置.......
 5             columns: [
 6                 {
 7                     align: "left",
 8                     halign: "left",
 9                     field: "isonloan",
10                     title: "车辆是否借出",
11                     formatter: function (value) {
12                         var state;
13                         if (value == '2') {
14                             state = "<span class='badge bg-red' style='padding:5px 10px;'>外借</span>";
15                         } else {
16                             state = "<span class='badge bg-green'  style='padding:5px 10px;'>在用</span>";
17                         }
18                         return state;
19                     }
20                 }
21             ],
22             onPageChange:function(number, size)
23             {
24                 //设置在分页事件触发时，传递分页参数给后台，重新加载数据
25                 var params={};
26                 params.start=number;
27                 params.limit=size;
28                 MP.doAction("base-car-query", params, function (datas) {
29                     if(datas.success)
30                     {
31                         $("#tb_departments").bootstrapTable('load', datas);
32                     }
33                 }, function(datas){
34                     alert("错误");
35                 }, true, true);
36             }
37         });
38     },

    6.Bootstrap Table 排序

    服务器模式排序，是前台传入排序字段，排序方式到后台，后台重新加载排序后的结果返回前台。本质与分页类似，都是需要通过重新发送ajax数据请求。在排序时的触发事件如下：

    onSort               sort.bs.table name,order 当用户对列进行排序时触发，参数包含：
    name: 排序列字段名
    order: 排序列的顺序

     

     

    后台代码需接收前台的排序字段，对于前台中文（数据库存储的是数字或英文，需要翻译为中文描述信息）展示的字段，约定字段规则，定义为数据库字段名称加字符串“Desc”，参考代码如下：

     1  /**
 2      * 解析前段传入的参数
 3      *
 4      * @param inMap 传入参数
 5      * @return
 6      */
 7     public static Map getPubQueryParams(Map inMap) {
 8         Map queryParams = new HashMap();
 9         String order = inMap.get("order") == null ? "" : inMap.get("order").toString();  //排序规则
10         String sort = inMap.get("sort") == null ? "" : inMap.get("sort").toString();     //排序字段
11         if (StringUtil.isNotEmpty()) {
12             sort = sort.replaceAll("Desc", "");                                      //去掉描述信息映射回数据库中的字段
13             sort = sort.replaceAll("([A-Z])", "_$1").toLowerCase();                //正则表达式替换驼峰为数据库格式
14         }
15         queryParams.put("order", order);
16         queryParams.put("sort", sort);
17         Integer start = inMap.get("start") == null ? 0 : (Integer) inMap.get("start");
18         Integer limit = inMap.get("start") == null ? 50 : (Integer) inMap.get("limit");
19         if (start > 0) {
20             start = (start - 1) * limit;
21         }
22         queryParams.put("start", start);
23         queryParams.put("limit", limit);
24         return queryParams;
25     }

    7.表格示例代码

     本例完整的js初始化表格，加载数据代码如下：

      1 Scdp.define("TestTable.view.testtableView", {
  2     extend: 'Scdp.bootstrap.mvc.AbstractCrudView',
  3     initView: function () {
  4         var me = this;
  5         me.loadCharts();
  6     },
  7     loadCharts: function () {
  8         var me = this;
  9         var t_limit=20;                       //设置默认分页参数
 10         var t_size=1;                         //设置默认分页参数
 11         var t_sort="uuid";                    //设置默认排序参数
 12         var t_order="desc";                   //设置默认排序规则
 13         var tb_departments = $("#tb_departments").bootstrapTable({
 14             method: 'post',                      //请求方式（*）
 15             height: MP.Const.dataGridHeight,
 16             toolbar: '#toolbar',                //工具按钮用哪个容器
 17             striped: true,                      //是否显示行间隔色
 18             cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
 19             pagination: true,                   //是否显示分页（*）
 20             sortable: true,                     //是否启用排序
 21             sortOrder: "asc",                   //排序方式
 22             sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
 23             pageNumber: 1,                       //初始化加载第一页，默认第一页
 24             pageSize: 20,                       //每页的记录行数（*）
 25             pageList: [20, 30, 40],        //可供选择的每页的行数（*）
 26             //search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
 27             strictSearch: true,
 28             //showPaginationSwitch: true,
 29             showExport: true,
 30             exportDataType: "all",
 31             showExport: true,  //是否显示导出按钮
 32             buttonsAlign:"right",  //按钮位置
 33             exportTypes:[ 'csv', 'txt', 'sql', 'doc', 'excel', 'xlsx', 'pdf'],  //导出文件类型
 34             Icons:'glyphicon-export',
 35             showColumns: true,                  //是否显示所有的列
 36             showToggle:true,                    //是否显示详细视图和列表视图的切换按钮
 37             showRefresh: true,                  //是否显示刷新按钮
 38             minimumCountColumns: 1,             //最少允许的列数
 39             clickToSelect: true,                //是否启用点击选中行
 40             cardView: false,                    //是否显示详细视图
 41             detailView: false,                   //是否显示父子表
 42             showHeader: true,
 43             columns: [
 44                 //{
 45                 //    title: "全选",
 46                 //    field: "select",
 47                 //    checkbox: true,
 48                 //     20,//宽度
 49                 //    align: "left",//水平
 50                 //    valign: "middle"//垂直
 51                 //},
 52                 {
 53                     title: '编号',//标题  可不加
 54                     formatter: function (value, row, index) {
 55                         return index+1;
 56                     }
 57                 },
 58                 {
 59                     align: "left",//水平居中
 60                     halign: "left",//垂直居中
 61                     field: "vehplate",
 62                     title: "车牌号码"
 63                 },{
 64                     align: "left",
 65                     halign: "left",
 66                     field: "price",
 67                     sortable:true,
 68                     title: "原值(万元)",
 69                     formatter: function (value) {
 70                         return "<span class='badge bg-orange'  style='padding:5px 10px;'>" + value + "</span>";
 71                     }
 72                 },
 73                 {
 74                     align: "left",
 75                     halign: "left",
 76                     field: "netvalue",
 77                     sortable:true,
 78                     title: "净值(万元)",
 79                     formatter: function (value) {
 80                         return "<span class='badge bg-green'  style='padding:5px 10px;'>" + value + "</span>";
 81                     }
 82                 },
 83                 {
 84                     align: "left",
 85                     halign: "left",
 86                     field: "accumulatedmileage",
 87                     sortable:true,
 88                     title: "累计里程"
 89                 },
 90                 {
 91                     align: "left",
 92                     halign: "left",
 93                     field: "accumulateddepreciation",
 94                     sortable:true,
 95                     title: "累计折旧(万元)"
 96                 },
 97                 {
 98                     align: "left",
 99                     halign: "left",
100                     field: "vehClass",
101                     title: "车型"
102                 },
103                 {
104                     align: "left",
105                     halign: "left",
106                     field: "vehtype1Desc",
107                     title: "车类",
108                 }, {
109                     align: "left",
110                     halign: "left",
111                     field: "vehtype2Desc",
112                     // 100,
113                     title: "车类明细"
114                 }, {
115                     align: "left",
116                     halign: "left",
117                     field: "vehtype3Desc",
118                    //  100,
119                     title: "行驶证车辆类型"
120                 },
121                 {
122                     align: "left",
123                     halign: "left",
124                     field: "isonloan",
125                     title: "车辆是否借出",
126                     formatter: function (value) {
127                         var state;
128                         if (value == '2') {
129                             state = "<span class='badge bg-red' style='padding:5px 10px;'>外借</span>";
130                         } else {
131                             state = "<span class='badge bg-green'  style='padding:5px 10px;'>在用</span>";
132                         }
133                         return state;
134                     }
135                 }, {
136                     align: "left",
137                     halign: "left",
138                     field: "usedepartDesc",
139                    //  170,
140                     title: "车辆使用部门"
141                 }, {
142                     align: "left",
143                     halign: "left",
144                     field: "managedepartDesc",
145                     // 170,
146                     title: "车辆管理部门",
147                 }, {
148                     align: "left",
149                     halign: "left",
150                     field: "affiliationDesc",
151                     // 170,
152                     title: "车辆所属单位"
153                 }, {
154                     align: "left",
155                     halign: "left",
156                     field: "locatecityDesc",
157                     // 170,
158                     title: "区域"
159                 },
160                 {
161                     align: "left",
162                     halign: "left",
163                     field: "buydate",
164                     title: "购置日期",
165                     sortable:true,
166                    //  200,
167                     formatter: function (value) {
168                         return MP.dateFormatter(new Date(value));
169                     }
170                 },
171                 {
172                     align: "left",
173                     halign: "left",
174                     field: "remark",
175                     // 270,
176                     title: "备注"
177                 }
178             ],
179             onPageChange:function(number, size)
180             {
181                 //设置在分页事件触发时，传递分页参数给后台，重新加载数据
182                 t_limit=number;
183                 t_size=size;
184                 var params={};
185                 params.start=number;
186                 params.limit=size;
187                 //加上排序的参数
188                 params.sort=t_sort;
189                 params.order=t_order;
190                 me.ajaxGetData(params);
191             },
192             onSort: function (name, order) {
193                 t_sort=name;
194                 t_order=order;
195                 var params={};
196                 //加上分页的参数
197                 params.start=t_limit;
198                 params.limit=t_size;
199                 params.sort=t_sort;
200                 params.order=t_order;
201                 me.ajaxGetData(params);
202             }
203         });
204     },
205     //ajax后台请求数据
206     ajaxGetData: function (params) {
207         MP.doAction("base-car-query", params, function (datas) {
208             if (datas.success) {
209                 $("#tb_departments").bootstrapTable('load', datas);
210             }
211         }, function (datas) {
212             alert("数据加载失败");
213         }, true, true);
214     }
215 });
    View Code

     对于表格多列数据展示问题及换行问题，可参考Bootstrap对table的class 定义样式。参考网站：http://www.runoob.com/bootstrap/bootstrap-tables.html

    <table id="tb_departments" class="table text-nowrap"></table>   //表示表格产生横向滚动条，内容设置为一行
    <table id="tb_departments" class="table table-striped"></table>   //不产生横向滚动条，数据内容折行显示

    8.未解决事项

    •  全部导出文件问题：在导出表格数据到文件时，发现设置导出模式为”all“时，重新请求了后台查询数据，但是携带的分页参数依旧是当页的分页参数，导致后台请求到的数据不是所有的数据。针对这个问题，目前还未解决。有一个解决思路可测试一下，参考代码在basic,all模式下js导出函数是如何处理的，通过查看js的导出实现函数，看能否修改分页参数的值，修改后台获取的数据数量。
    • pdf文件导出内容显示不全问题：通过引用本例的js插件，已经处理了pdf导出中文乱码问题，修改了js中的部分字体代码，详情查看网址：http://m.blog.csdn.net/youand_me/article/details/76642434。目前发现导出的pdf展示数据列不全，后面的部分的数据列内容在pdf中无法展示的问题。分析原因是因为pdf文件的宽度有限，多列数据列展示时，不像excel一样可以拖动展示。同样情况下的word文件导出时，word文件能展示数据，只是格式变乱了（标题变窄）。所以，这个问题针对少量数据列时，导出到pdf文件中，没有问题，多数据列时，无论是导出到pdf或者word文件中，在格式方面均不好，可根据实际项目看是否处理，个人觉得意义不大，数据列多时，始终展示界面会不好。

    9.相关插件

    请点击链接可下载BootStrap Table（当前版本 v 1.1.1）插件。bootstrap-table-develop.zip

     10.参考网址

    http://bootstrap-table.wenzhixin.net.cn/

    http://www.runoob.com/bootstrap/bootstrap-tables.html

    http://blog.csdn.net/rickiyeat/article/details/56483577

     

    

     
    

    
    
          
    • 

          
  • 

            相关阅读:
    
            
              rs
                
    stm32f767 usoc3
                
    stm32f767  RTT  日志
                
    stm32f767 标准库  工程模板
                
    stm32f767 HAL  工程模板
                
    docker  tab 补全 linux tab 补全 
                
    docker anconda  依赖 下载 不了
                
    docker run 常用  指令 
                
    linux scp 命令
                
    Dockerfile 常用参数说明
                
                    
          
    • 
          
  • 
            原文地址：https://www.cnblogs.com/wlandwl/p/bootstrap_table.html
          
    • 

        

      



      
      

        

        

      

    

  


  

  
Copyright © 2020-2023 
  润新知