Bootstrap-table
快速入門---- bootstrap-table是一個基於Bootstrap的jQuery插件
可以實現從數據庫中提取數據到前端進行相應操作的功能
更加優秀的頁面展現請到bootstrap-table
Table of contents
quick-start
對本文有什么疑問或者建議,可以在下方的評論區說明,筆者會盡能力給出解答,另外已經完成了bootstrap-table的增刪改查操作,以及增加操作的的模態框(bootstrap modal),以及表單校檢(bootstrap-validate),最近有點忙,過一段時間更新,還有側邊欄的動態生成(bootstrap-treeview)也是在學習當中
快速使用:
- Download bootstrap-table hello demo
- 預覽前端demo代碼
- Clone the repo:
git clone https://github.com/seltonGitHub/helloBootTable.git
沒有配置java環境,移步JDK安裝與環境變量配置;
沒有配置tomcat環境,移步tomcat的下載和安裝配置;
沒有下載配置idea環境,移步IntelliJ IDEA安裝以及配置;
why-use
- 學習成本低,配置簡單,文檔齊全
- 與Bootstrap無縫銜接,整體風格一致,也便於二次開發
- 開發者活躍,Github定期維護
whats-included
file list:
bootstrapDemo/
├── web/
│ ├── js
│ ├── WEB-INF
│ └── bootindex.html
└── src/
│ └── DataSendServlet.java
表單展示頁面 (bootindex.html)
javascript文件 (showOrder.js)從服務器取得數據,然后渲染表格
details
$("#table").bootstrapTable({
method: "post",
url: "獲取后台數據的url",
... ...
});
這里的js語句的所有渲染操作是針對html頁面中的id為table的一個table,所以不要忘了在導入了該js的html中構建出id為table的table
bootstrap-table中的重要鍵值的簡單解釋:
- url(必須修改)
- method
- pageSize(必須修改)
- jsonstyle(必須修改)
- columns(必須修改)
- contentType(必須填寫)
- queryParams
- pageNumber
- 表格綁定事件
showorder.js會向服務器發起ajax訪問
bootstrapTable構建元素解析:
url
$("#table").bootstrapTable({
method: "post",
url: "獲取后台數據的url",
... ...
});
ajax訪問到的后台路徑(必須),該后台需要按照指定的json 格式返回數據
method
get發送的數據在請求報文的請求行,也就是url部分,而且參數如果有中文會出現亂碼問題,而post發送的數據在報文實體,都應該是post,表單的提交也一般都是post
queryParams
不需要任何修改,相當於ajax中的data鍵,上面的method決定這些參數傳遞給后台的的傳遞方式.發送給后台的數據,給出實現表單分頁的兩個參數,offset和limit,在oTableInit.queryParams中給出,后台用request.getParameter()的方式拿到queryParams中傳遞過來的值,然后制定dao
pageSize
當前table一次最多顯示多少行,也就是你的table的一頁應該展現多少行,必須
pageNumber
起始頁,一般是1不用改,這個和pageSize決定了queryParams中的offset的值,offset=(pageNow - 1) * pageSize,limit=pageSize
contentType
contentType: "application/x-www-form-urlencoded"
columns
$("#table").bootstrapTable({
method: "post",
url: "獲取后台數據的url",
data: [
{field: 'testId', title: 'ID'},
{field: 'testName', title: '姓名'},
{field: 'testPassword', title: '密碼'}
]
... ...
]
});
你的table的表結構,以上例子表示表有三列,列的實際顯示名字分別是ID,姓名,密碼,但是field代表實際數據的名字,表中的數據是由於ajax向服務器發起訪問,服務器返回給的數據中的rows的每一個json對象的鍵都會對應到field的列中-----服務器返還的值
jsonstyle
{
"total":25,
"rows":[
{
"testID":1,
"testName":"xiaoming1",
"testPassword":"xiaomingpwd1"
},
{
"testID":2,
"testName":"xiaoming2",
"testPassword":"xiaomingpwd2"
}
]
}
數據庫返還給發起訪問的ajax的數據,必須滿足,包含兩個json形式的鍵值對,
一個是total鍵,值為表單擁有者在數據庫中的全部數據的數量(行數),這個數據和pageSize決定table展示的頁面有多少頁,另一個是rows鍵,值為多個json對象,rows的每一個json對象就是當前table頁的一行實體展示,這里的rows相當於會給前端table兩行數據,testID,testName,testPassword分別會被填入到table中的field對應的列中-----前端接收到值表現
offset
oTableInit.queryParams = function (params) {
var temp = { //這里的鍵的名字和控制器的變量名必須一直，這邊改動，控制器也需要改成一樣的
limit: params.limit, //params.limit, 頁面大小
offset: params.offset,
testNum: 445,
testNum1: 343
};
offset=(pageNumber - 1) * pageSize,是會被發送到后台使用的數據,后台數據提取sql語句示例
limit
oTableInit.queryParams = function (params) {
var temp = { //這里的鍵的名字和控制器的變量名必須一直，這邊改動，控制器也需要改成一樣的
limit: params.limit, //params.limit, 頁面大小
offset: params.offset,
testNum: 445,
testNum1: 343
};
limit=pageSize,是會被發送到后台使用的數據,后台數據提取sql語句示例
sql示例
SELECT * FROM test WHERE id = ? LIMIT offset,limit
表格綁定事件
用於測試ajax返回的數據是最好的
$("#table").bootstrapTable({
method: "post",
url: "獲取后台數據的url",
onLoadSuccess: function(){ //加載成功時執行
console.info("加載成功");
},
onLoadError: function(){ //加載失敗時執行
console.info("加載數據失敗");
}
});
關於事件,更為詳細的介紹請訪問boottableDoc
editable
這是在操作table嗎,感覺就像是數據庫展現在了頁面上
如果你已經閱讀完或者已經在自己代碼中實現了上述功能,但是table存在的目的本來就不應該只是展現,應該還有尋常的CRUD,精力有限,只是實踐了update,筆者使用的是行內編輯的方式實現的update,需要用到另一個工具X-editable,不過還好boottable有這樣的插件,將x-editable封裝整合到了當中,只需要引入https://cdn.bootcss.com/bootstrap-table/1.12.1/extensions/editable/bootstrap-table-editable.min.js
start editable
$("#table").bootstrapTable({
method: "post",
url: "獲取后台數據的url",
[
{field: 'testId',
title: 'ID',
editable: {mode: 'popup'}
},
{field: 'testName',
title: '姓名'},
{field: 'testPassword',
title: '密碼'}
]
... ...
]
});
onEditableSave: function (field, row, oldValue, $el) {
$.ajax({
type: "post",
url: "/ordercenter/updateOrder.json",
data: {
orderid: row.orderid,
updateCol: field,
updateVal: eval('row.'+field)
},
dataType: 'JSON',
success: function (data, status) {
console.log(data);
if (status == "success") {
alert('舊數據: 訂單號: ' + row.orderid + ' ' + field + ': ' + oldValue + '\r\n'
+ '更新后的數據: 訂單號: ' + data.updateId + ' ' + data.updateCol + ': ' + data.updateVal)
}
},
error: function () {
alert('編輯失敗');
},
complete: function () {
}
});
},
details editable
編輯后的提交方法統一放到onEditableSave事件里面統一處理
例子: 頁面table中的列姓名,field為testName,實際的值為xiaoming1,通過修改將其改為xiaoming2,這時候field為testName,row為一個json,鍵值對分別為該行的所有鍵值組合,oldValue為xiaoming1
更為詳細的描述請到x-editable
建議讀者直接使用我的onEditableSave,它向后台發送了三個數據精確完成update,行特定標識和列特定標識定位到修改了哪一個具體的數據,再給出updateVal指出原本的數據被修改成了updateVal
moreEditable
editable中的mode的值一般是popup,翻譯是彈出的意思,也可以使用inline值,但是點擊並且編輯的時候會使表格樣式發生改變,而popup則不會
demo
web-xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
version="4.0">
<welcome-file-list>
<welcome-file>/bootindex.html</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>DataSendServlet</servlet-name>
<servlet-class>com.selton.DataSendServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>DataSendServlet</servlet-name>
<url-pattern>/DataSendServlet</url-pattern>
</servlet-mapping>
</web-app>
html-demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.0.1/css/bootstrap.min.css">
<link href="https://cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.min.css" rel="stylesheet">
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<script language="JavaScript" src="/js/showOrder.js"></script>
<script language="JavaScript">
$(function () {
//1.初始化Table
var oTable = new TableInit();
oTable.Init();
});
</script>
</head>
<body>
<div class="container">
<table id="Table"></table>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>
</body>
</html>
js-demo
var TableInit = function () {
var oTableInit = new Object();
//初始化Table
oTableInit.Init = function () {
$('#Table').bootstrapTable({
url: '/DataSendServlet', //請求后台的URL（*）
method: 'get', //請求方式（*）
async: true, //true表示執行到這,ajax向后台發起訪問,在等待響應的這段時間里,繼續執行下面的代碼
//設置為true,基本都是后面的代碼(除非還有ajax)先執行
// toolbar: '#toolbar', //工具按鈕用哪個容器
striped: true, //是否顯示行間隔色
cache: false, //是否使用緩存，默認為true，所以一般情況下需要設置一下這個屬性（*）
pagination: true, //是否顯示分頁（*）
queryParams: oTableInit.queryParams,//傳遞參數（*）
sidePagination: "server", //分頁方式：client客戶端分頁，server服務端分頁（*）
paginationPreText:'<', //上一頁按鈕樣式
paginationNextText:'>', //下一頁按鈕樣式
pageNumber: 1, //初始化加載第一頁，默認第一頁
pageSize: 10, //每頁的記錄行數（*）
pageList: [10, 25, 50, 100], //可供選擇的每頁的行數（*）
contentType: "application/x-www-form-urlencoded", //重要選項,必填
showColumns: true, //是否顯示所有的列
showRefresh: true, //是否顯示刷新按鈕
minimumCountColumns: 2, //最少允許的列數
clickToSelect: true, //是否啟用點擊選中行
//height: 700, //行高，如果沒有設置height屬性，表格自動根據記錄條數決定表格高度,最好不要設置這個屬性
uniqueId: "no", //每一行的唯一標識，一般為主鍵列
showToggle: true, //是否顯示詳細視圖和列表視圖的切換按鈕
cardView: false, //是否顯示詳細視圖
detailView: false, //是否顯示父子表
columns: [
{
field: 'testId',
title: 'ID',
editable: {
mode: 'inline'
}
}, {
field: 'testName',
title: '用戶名'
}, {
field: 'testPassword',
title: '密碼'
}
],
rowStyle: function (row, index) {
var classesArr = ['success', 'info'];
var strclass = "";
if (index % 2 === 0) {//偶數行
strclass = classesArr[0];
} else {//奇數行
strclass = classesArr[1];
}
return {classes: strclass};
},//隔行變色
});
};
//得到查詢的參數
oTableInit.queryParams = function (params) {
var temp = { //這里的鍵的名字和控制器的變量名必須一直，這邊改動，控制器也需要改成一樣的
limit: params.limit, //params.limit, 頁面大小
offset: params.offset,
testNum: 445,
testNum1: 343
};
return temp;
};
return oTableInit;
};
server-demo
package com.selton;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.Enumeration;
/**
* @author seltonzyf@gmail.com
* @date 2018/5/10 13:59
*/
@WebServlet(name = "DataSendServlet")
public class DataSendServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//這里輸出后台從ajax拿到的數據
Enumeration<String> parameterNames = request.getParameterNames();
while (parameterNames.hasMoreElements()) {
String s = parameterNames.nextElement();
String parameter = request.getParameter(s);
System.out.println("s = " + s);
System.out.println("parameter = " + parameter);
}
response.getWriter().print("{\"total\": 11, \"rows\":[{\"testId\":9, \"testName\":\"selton\", \"testPassword\": 1}]}");
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request,response);
}
}
注意
- bootstrap-table只能被調用一次的問題
在inittable之前
$("#table").bootstrapTable('destroy');
清空之前表內數據
- 服務器向前端發送的用於構建表單的json,所有的鍵都會變成小寫