寫在前面：
表格在項目中是使用比較多的，bootstrap-table插件也是非常好用，而且表格頁面也比較好看。這里也簡單的記錄下。
下面直接看demo吧，代碼中都注釋了，有些用法，這里沒有用到，需要用到的可以在網上查查。例子有很多的。
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <% String scheme = request.getScheme(); String serverName = request.getServerName(); String contextPath = request.getContextPath(); int port = request.getServerPort(); //網站的訪問跟路徑 String baseURL = scheme + "://" + serverName + ":" + port + contextPath; request.setAttribute("baseURL", baseURL); System.out.println("baseURL:" + baseURL); %> <html> <head> <meta name="viewport" content="width=device-width" /> <title>bootstrap-select測試</title> <%--導入bootstrap與table樣式--%> <link rel="stylesheet" type="text/css" href="${baseURL}/Bootstrap/bootstrap/css/bootstrap.min.css" /> <link href="${baseURL}/Bootstrap/bootstrap-table/bootstrap-table.css" rel="stylesheet" /> <%--先導入jqury插件--%> <script src="${baseURL}/Bootstrap/bootstrap/assets/js/jquery-1.10.2.min.js"></script> <%--導入bootstrap插件--%> <script src="${baseURL}/Bootstrap/bootstrap/assets/js/bootstrap.min.js"></script> <%--table插件--%> <script src="${baseURL}/Bootstrap/bootstrap-table/bootstrap-table.js"></script> <style type="text/css"> /*解決設置表頭列寬無效*/ #table{ table-layout: fixed; } /*給表格邊框加顏色*/ table,table tr th, table tr td { border:1px solid #fac090; } </style> </head> <body> <div style=""> <%--給table一個id--%> <table id="mytable"></table> </div> </body> <script> $(function(){ //初始化Table var personTable = $('#mytable').bootstrapTable({ url: '${baseURL}/listAllSAPerson',//請求后台的URL（*） method: 'get',//請求方式（*） dataType: "json", //服務器返回的數據類型 toolbar: '#toolbar',//工具按鈕用哪個容器 striped: true,//是否顯示行間隔色 sidePagination: "server",//分頁方式：client客戶端分頁，server服務端分頁（*） pageNumber: 1,//初始化加載第一頁，默認第一頁 設置了分頁首頁頁碼 pageSize: 4,//每頁的記錄行數（*） pageList: [2, 4, 6, 8],//可供選擇的每頁的行數（*） showPaginationSwitch:false,//是否顯示數據條數選擇框 cache: false,//是否使用緩存 ，默認為true，所以一般情況下需要設置一下這個屬性（*） pagination: true,//是否顯示分頁（*） sortable: true,//是否啟用排序 sortName: "perCode", //按照perCode排序 sortOrder: "asc",//排序方式 queryParams: function (params) {//自定義參數，這里的參數是傳給后台的，我這里是分頁用的 return {//這里的params是table提供的 startIndex: params.offset,//從數據庫第幾條記錄開始,使用offset后台分頁查詢時不用再減去1 pageSize: params.limit//每頁記錄數 //后台要用名字相同的變量來接收比如，這里后台要用startIndex,pageSize兩個變量來分別進行接收 }; },//傳遞參數（*） // search: true,//是否顯示表格搜索，此搜索是客戶端搜索，不會進服務端 contentType: "application/x-www-form-urlencoded", strictSearch: true, //showColumns: true,//是否顯示內容列下拉框 //showRefresh: true,//是否顯示刷新按鈕 minimumCountColumns: 2,//最少允許的列數 clickToSelect: true,//是否啟用點擊選中行 //height: 700,//行高，如果沒有設置height屬性，表格自動根據記錄條數覺得表格高度 //width:'50%', uniqueId: "perCode",//每一行的唯一標識，一般為主鍵列 //showToggle: true,//是否顯示詳細視圖和列表視圖的切換按鈕 cardView: false,//是否顯示詳細視圖 detailView: false,//是否顯示父子表 checkboxHeader :false, //隱藏表頭的checkbox singleSelect: true, //開啟單選 columns: [ { checkbox:true //每一行前面是否開啟checkbox }, { field: 'perCode', title: 'ID', valign:'middle', align:'center', visible:true, //隱藏 width:'100px', //解決設置表頭列寬無效樣式后 這里的width才會生效 //colspan:2, //設置列樣式 /*cellStyle:{ css:{"background-color":"#fac090"} }*/ }, { field: 'perName', title: 'Name', align:'center', width:'100px' }, { field: 'role', title: 'Role', align:'center', width:'100px' }, { field: 'stateName', title: 'Status', align:'center', width:'100px' } ], //設置行樣式 rowStyle: function (row, index) { //根據獲取perCode來判斷是否刪除了 來顯示刪除線樣式 if (row.perCode == "W01"){ //設置為刪除樣式 根據自己的項目需求來 return {css:{"text-decoration":"line-through","color":"red"}} }else{ return {css:{"background-color":"white"}} } //這里也可設置行間隔色 /*if(index % 2 == 0){ return {css:{"background-color":"greed"}} }else{ return {css:{"background-color":"yellow"}} } */ }, }); }); </script> </html>
這樣一個table就出來了，下面是它的效果圖:
用法也還是很方便簡單的，對於每一行的顏色，或者每一列的顏色，也可以自己去修改設置。對於表格一般都會涉及到分頁，分頁傳遞的參數在queryParams中進行設置，在代碼中也做了例子，參照代碼就可以了。
除了使用分頁外，有時候會帶條件查詢表格，那么這個時候就需要將需要查詢的參數加入到queryParams中，然后傳到后台了，比較常見的用法是表單條件查詢，下面是代碼：
queryParams: function (params) {//自定義參數，這里的參數是傳給后台的，我這里是分頁用的
//如果是條件查詢 這里要帶上查詢條件 不然 點擊下一頁不會帶條件查詢
var p = serializeForm($("#header_form")) || {};
p.startIndex = params.offset,//從數據庫第幾條記錄開始
p.pageSize = params.limit//每頁記錄數
return p;
},//傳遞參數（*）
//序列化表單
function serializeForm(form){
var obj = {};
$.each(form.serializeArray(),function(index){
if(obj[this['name']]){
obj[this['name']] = obj[this['name']] + ','+this['value'];
} else {
obj[this['name']] =this['value'];
}
});
return obj;
}
好了，分頁帶條件注意的就是這么多了，感覺寫起來也沒多少要注意的，對了，對於后台返回對應的json格式的數據，
Map<String,Object> map = new HashMap<>(); map.put("rows",voList); map.put("total",totalCount); JsonConfig jsonConfig=new JsonConfig(); jsonConfig.registerJsonValueProcessor(Date.class,new JsonDateValueProcessor()); jsonObject = JSONObject.fromObject(map, jsonConfig);
這里需要的是rows與total、都是小寫的，不要寫成了大寫，具體的數據的返回，這里就不多做代碼展示了，之前寫ligerUI中都有對應的代碼介紹，這里雖然使用的是bootstrap，但是由於傳遞json數據給前台頁面的方法都是一致的，就不再重復多說了。
當需要重新加載表格的時候，也可以使用這種方式
//$("#table").bootstrapTable("refresh",{ url: "${baseURL}/listAllDemo","query":{"id":"333"}}); //單個條件查詢
//表單條件查詢 還是先序列化表單
var queryData = serializeForm($("#header_form"));;
$("#table").bootstrapTable("refresh",{ url: "${baseURL}/listAllSAPerson","query":queryData});