新的表格展示利器 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加载数据的方式如下：

  doSearch: function () {

         var params={};

         params.start=1;

         params.limit=20;

         // MP.doAction（）函数为封装的ajax请求后台数据的函数，数据从后台请求成功后，通过load函数，加载数据。

         MP.doAction("base-car-query", params, function (datas) {

             if(datas.success)

             {    //数据绑定 ，datas为json格式的数据

                 $("#tb_departments").bootstrapTable('load', datas);

             }

         }, function(datas){

             alert("数据加载失败");

         }, true, true);

     }

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

更改页码或页面大小时触发.

  loadCharts: function ()

         var me = this;

         var tb_departments = $("#tb_departments").bootstrapTable({

            // 表格属性设置.......

             columns: [

                 {

                     align: "left",

                     halign: "left",

                     field: "isonloan",

                     title: "车辆是否借出",

                     formatter: function (value) {

                         var state;

                         if (value == '2') {

                             state = "<span class='badge bg-red' style='padding:5px 10px;'>外借</span>";

                         } else {

                             state = "<span class='badge bg-green'  style='padding:5px 10px;'>在用</span>";

                         }

                         return state;

                     }

                 }

             ],

             onPageChange:function(number, size)

             {

                 //设置在分页事件触发时，传递分页参数给后台，重新加载数据

                 var params={};

                 params.start=number;

                 params.limit=size;

                 MP.doAction("base-car-query", params, function (datas) {

                     if(datas.success)

                     {

                         $("#tb_departments").bootstrapTable('load', datas);

                     }

                 }, function(datas){

                     alert("错误");

                 }, true, true);

             }

         });

     },

6.Bootstrap Table 排序

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

onSort sort.bs.table

name,order

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

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

  /**

      * 解析前段传入的参数

      *

      * @param inMap 传入参数

      * @return

      */

     public static Map getPubQueryParams(Map inMap) {

         Map queryParams = new HashMap();

         String order = inMap.get("order") == null ? "" : inMap.get("order").toString();  //排序规则

         String sort = inMap.get("sort") == null ? "" : inMap.get("sort").toString();     //排序字段

         if (StringUtil.isNotEmpty()) {

             sort = sort.replaceAll("Desc", "");                                      //去掉描述信息映射回数据库中的字段

             sort = sort.replaceAll("([A-Z])", "_$1").toLowerCase();                //正则表达式替换驼峰为数据库格式

         }

         queryParams.put("order", order);

         queryParams.put("sort", sort);

         Integer start = inMap.get("start") == null ? 0 : (Integer) inMap.get("start");

         Integer limit = inMap.get("start") == null ? 50 : (Integer) inMap.get("limit");

         if (start > 0) {

             start = (start - 1) * limit;

         }

         queryParams.put("start", start);

         queryParams.put("limit", limit);

         return queryParams;

     }

7.表格示例代码

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

 Scdp.define("TestTable.view.testtableView", {

     extend: 'Scdp.bootstrap.mvc.AbstractCrudView',

     initView: function () {

         var me = this;

         me.loadCharts();

     },

     loadCharts: function () {

         var me = this;

         var t_limit=20;                       //设置默认分页参数

         var t_size=1;                         //设置默认分页参数

         var t_sort="uuid";                    //设置默认排序参数

         var t_order="desc";                   //设置默认排序规则

         var tb_departments = $("#tb_departments").bootstrapTable({

             method: 'post',                      //请求方式（*）

             height: MP.Const.dataGridHeight,

             toolbar: '#toolbar',                //工具按钮用哪个容器

             striped: true,                      //是否显示行间隔色

             cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）

             pagination: true,                   //是否显示分页（*）

             sortable: true,                     //是否启用排序

             sortOrder: "asc",                   //排序方式

             sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）

             pageNumber: 1,                       //初始化加载第一页，默认第一页

             pageSize: 20,                       //每页的记录行数（*）

             pageList: [20, 30, 40],        //可供选择的每页的行数（*）

             //search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大

             strictSearch: true,

             //showPaginationSwitch: true,

             showExport: true,

             exportDataType: "all",

             showExport: true,  //是否显示导出按钮

             buttonsAlign:"right",  //按钮位置

             exportTypes:[ 'csv', 'txt', 'sql', 'doc', 'excel', 'xlsx', 'pdf'],  //导出文件类型

             Icons:'glyphicon-export',

             showColumns: true,                  //是否显示所有的列

             showToggle:true,                    //是否显示详细视图和列表视图的切换按钮

             showRefresh: true,                  //是否显示刷新按钮

             minimumCountColumns: 1,             //最少允许的列数

             clickToSelect: true,                //是否启用点击选中行

             cardView: false,                    //是否显示详细视图

             detailView: false,                   //是否显示父子表

             showHeader: true,

             columns: [

                 //{

                 //    title: "全选",

                 //    field: "select",

                 //    checkbox: true,

                 //    width: 20,//宽度

                 //    align: "left",//水平

                 //    valign: "middle"//垂直

                 //},

                 {

                     title: '编号',//标题  可不加

                     formatter: function (value, row, index) {

                         return index+1;

                     }

                 },

                 {

                     align: "left",//水平居中

                     halign: "left",//垂直居中

                     field: "vehplate",

                     title: "车牌号码"

                 },{

                     align: "left",

                     halign: "left",

                     field: "price",

                     sortable:true,

                     title: "原值(万元)",

                     formatter: function (value) {

                         return "<span class='badge bg-orange'  style='padding:5px 10px;'>" + value + "</span>";

                     }

                 },

                 {

                     align: "left",

                     halign: "left",

                     field: "netvalue",

                     sortable:true,

                     title: "净值(万元)",

                     formatter: function (value) {

                         return "<span class='badge bg-green'  style='padding:5px 10px;'>" + value + "</span>";

                     }

                 },

                 {

                     align: "left",

                     halign: "left",

                     field: "accumulatedmileage",

                     sortable:true,

                     title: "累计里程"

                 },

                 {

                     align: "left",

                     halign: "left",

                     field: "accumulateddepreciation",

                     sortable:true,

                     title: "累计折旧(万元)"

                 },

                 {

                     align: "left",

                     halign: "left",

                     field: "vehClass",

                     title: "车型"

                 },

                 {

                     align: "left",

                     halign: "left",

                     field: "vehtype1Desc",

                     title: "车类",

                 }, {

                     align: "left",

                     halign: "left",

                     field: "vehtype2Desc",

                     //width: 100,

                     title: "车类明细"

                 }, {

                     align: "left",

                     halign: "left",

                     field: "vehtype3Desc",

                    // width: 100,

                     title: "行驶证车辆类型"

                 },

                 {

                     align: "left",

                     halign: "left",

                     field: "isonloan",

                     title: "车辆是否借出",

                     formatter: function (value) {

                         var state;

                         if (value == '2') {

                             state = "<span class='badge bg-red' style='padding:5px 10px;'>外借</span>";

                         } else {

                             state = "<span class='badge bg-green'  style='padding:5px 10px;'>在用</span>";

                         }

                         return state;

                     }

                 }, {

                     align: "left",

                     halign: "left",

                     field: "usedepartDesc",

                    // width: 170,

                     title: "车辆使用部门"

                 }, {

                     align: "left",

                     halign: "left",

                     field: "managedepartDesc",

                     //width: 170,

                     title: "车辆管理部门",

                 }, {

                     align: "left",

                     halign: "left",

                     field: "affiliationDesc",

                     //width: 170,

                     title: "车辆所属单位"

                 }, {

                     align: "left",

                     halign: "left",

                     field: "locatecityDesc",

                     //width: 170,

                     title: "区域"

                 },

                 {

                     align: "left",

                     halign: "left",

                     field: "buydate",

                     title: "购置日期",

                     sortable:true,

                    // width: 200,

                     formatter: function (value) {

                         return MP.dateFormatter(new Date(value));

                     }

                 },

                 {

                     align: "left",

                     halign: "left",

                     field: "remark",

                     //width: 270,

                     title: "备注"

                 }

             ],

             onPageChange:function(number, size)

             {

                 //设置在分页事件触发时，传递分页参数给后台，重新加载数据

                 t_limit=number;

                 t_size=size;

                 var params={};

                 params.start=number;

                 params.limit=size;

                 //加上排序的参数

                 params.sort=t_sort;

                 params.order=t_order;

                 me.ajaxGetData(params);

             },

             onSort: function (name, order) {

                 t_sort=name;

                 t_order=order;

                 var params={};

                 //加上分页的参数

                 params.start=t_limit;

                 params.limit=t_size;

                 params.sort=t_sort;

                 params.order=t_order;

                 me.ajaxGetData(params);

             }

         });

     },

     //ajax后台请求数据

     ajaxGetData: function (params) {

         MP.doAction("base-car-query", params, function (datas) {

             if (datas.success) {

                 $("#tb_departments").bootstrapTable('load', datas);

             }

         }, function (datas) {

             alert("数据加载失败");

         }, true, true);

     }

 });

对于表格多列数据展示问题及换行问题，可参考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