新的表格展示利器 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",
//width: 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                 //    width: 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                     //width: 100,
113                     title: "车类明细"
114                 }, {
115                     align: "left",
116                     halign: "left",
117                     field: "vehtype3Desc",
118                    // width: 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                    // width: 170,
140                     title: "车辆使用部门"
141                 }, {
142                     align: "left",
143                     halign: "left",
144                     field: "managedepartDesc",
145                     //width: 170,
146                     title: "车辆管理部门",
147                 }, {
148                     align: "left",
149                     halign: "left",
150                     field: "affiliationDesc",
151                     //width: 170,
152                     title: "车辆所属单位"
153                 }, {
154                     align: "left",
155                     halign: "left",
156                     field: "locatecityDesc",
157                     //width: 170,
158                     title: "区域"
159                 },
160                 {
161                     align: "left",
162                     halign: "left",
163                     field: "buydate",
164                     title: "购置日期",
165                     sortable:true,
166                    // width: 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                     //width: 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

 


 

posted @ 2017-08-07 10:14  无涯Ⅱ  阅读(40394)  评论(28编辑  收藏  举报