spring bootstrap table 表格建立

前台表格插件多種樣，以前用過datatable以及gridtable，這次想要嘗試一個新的，就選擇了bootstrap table，主要是界面定了想要用bootstrap設計界面，是以就選擇了這個，bootstrap table 官網為http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/，裡面對表格各種問題都有較長的描述。好了，不多說了，下面來詳細說明bootstrap table編寫的步驟。

1、引入檔案

<!-- 引入bootstrap css檔案 -->
<link rel="stylesheet" href="../css/bootstrap.min.css">
<!-- 引入bootstrap table css檔案 -->
<link href="../css/bootstrap-table.css" rel="stylesheet">
<!-- 引入jquery檔案 -->
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/bootstrap-table.js"></script>
<!-- 引入中文語言包 -->
<script src="../js/bootstrap-table-locale-all.js"></script>
           

從網上下載下傳這些檔案，然後放到指定檔案夾下面

2、bootstrap table js 為了以後友善應用，我把js提取出來放到單獨js裡面，然後傳參，隻要傳過去的參數符合要求，就可以在界面上展示改表格。

/**
 * bootstrap分頁方法
 */
var TableInitSearch = function() {
    var oTableInit = new Object();
    //oTableInit.bootstrapTable('destroy');  
    // 初始化Table
    oTableInit.Init = function(id, url,columns,searchArgs) {
        //---先銷毀表格 ---
        $(id).bootstrapTable('destroy');  
        $(id).bootstrapTable({
            url : url, // 請求背景的URL（*）
             method: 'post',
             contentType: "application/x-www-form-urlencoded",
             //【查詢設定】
             /* queryParamsType的預設值為 'limit' ,在預設情況下 傳給服務端的參數為：offset,limit,sort
                               設定為 ''  在這種情況下傳給伺服器的參數為：pageSize,pageNumber */
             queryParamsType:'', 
             striped : false, // 是否顯示行間隔色
             cache : false, // 是否使用緩存，預設為true，是以一般情況下需要設定一下這個屬性（*）
             toolbar : '#toolbar', // 工具按鈕用哪個容器
             queryParams: function queryParams(params) {  
               var param = {  
                   pageNumber: params.pageNumber,    //背景接收的時候為pageNumber
                   pageSize: params.pageSize //背景接收的時候為pageSize
               }; 
               for(var key in searchArgs){
                   param[key]=searchArgs[key]//此處查詢時向背景傳遞的參數
               }  
               return param;                   
             }, 
             //【其它設定】
             locale:'zh-CN',//中文支援
             pagination: true,//是否開啟分頁（*）
             sortOrder : "asc", // 排序方式
             pageNumber:,//初始化加載第一頁，預設第一頁
             pageSize: ,//每頁的記錄行數（*）
             pageList: [ , , ,  ], // 可供選擇的每頁的行數（*）
             sidePagination: "server", //分頁方式：client用戶端分頁，server服務端分頁（*）
             search : false, // 是否顯示表格搜尋，此搜尋是用戶端搜尋，不會進服務端，是以，個人感覺意義不大
             strictSearch : true,
             minimumCountColumns : , // 最少允許的列數
             clickToSelect : true, // 是否啟用點選選中行
             showRefresh:false,//重新整理按鈕
             //【樣式設定】
              height: ,//table的高度
             cardView : false, // 是否顯示詳細視圖
             detailView : false, // 是否顯示父子表
            columns : columns,
        });

    };
    return oTableInit;
};
           

從上圖可以看出需要傳遞三個參數，id ，傳到背景的url，以及column。

3、jsp界面

<table id="table"></table>
           

<script>
var id = "#table";
var  url = "${pageContext.request.contextPath}/user/userlist";
var  columns = [
                {
                    field : 'id',
                    title : '使用者編号',
                    align : 'center',
                    valign : 'middle'
                },
                {
                    field : 'name',
                    title : '姓名',
                    align : 'center',
                    valign : 'middle'
                },
                {
                    field : 'age',
                    title : '年齡',
                    align : 'center',
                    valign : 'middle'
                }];
//1.初始化Table
var oTable = new TableInitSearch();
var searchArgs = {
        id:null,
        name:null
}
//界面初始化
$(function() {
            oTable.Init(id, url, columns, searchArgs);
        });
function toSearch() {
var name= $("input[name='name']").val();//獲得input框輸入的name值
var id= $("input[name='id']").val();//獲得input框輸入的id值
    searchArgs = {
        id: id,
        name: name
    }
    oTable.Init(id, url, columns, searchArgs);                          
} 
</script>
           

4、背景 conctroller

@RequestMapping("/userlist")
@ResponseBody 
//ajax調用
public Map<String, Object> getUsers(Integer pageSize,
        Integer pageNumber,String name,String id) {
    Map<String, Object> result = new HashMap<String, Object>();
    List<User> userlist = ........//此處為背景調用擷取使用者的方法
    result.put("total", total);//擷取清單總數量
    result.put("rows", userlist);/擷取使用者數list
}
           

果然是不寫不知道，一寫就真的了解别人真的不是沒寫，有些東西真的是下意識的忽略。