新的表格展示利器 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