Bootstrap table使用知識-轉
http://www.cnblogs.com/landeanfen/p/5005367.htmljavascript
官方文檔：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/css
最近客戶提出需求，想將原有的管理系統，作下優化，經過手機也能很好展示，想到2個方案:html
a方案：保留原有的頁面，新設計一套適合手機的頁面，當手機訪問時，進入m.zhy.com(手機頁面)，pc設備訪問時，進入www.zhy.com(pc頁面)前端
b方案：採用bootstrap框架,替換原有頁面，自動適應手機、平板、PC 設備java
採用a方案，須要設計一套界面，而且要得從新寫適合頁面的接口，考慮到時間及成本問題，故項目採用了b方案jquery
1、效果展現spring
2、BootStrap table簡單介紹sql
|
1
|
bootStrap table 是一個輕量級的table插件，使用AJAX獲取JSON格式的數據，其分頁和數據填充很方便，支持國際化
|
3、使用方法json
一、引入js、cssbootstrap
|
1
2
3
4
5
6
7
8
|
<!--css樣式-->
<link href=
"css/bootstrap/bootstrap.min.css"
rel=
"stylesheet"
>
<link href=
"css/bootstrap/bootstrap-table.css"
rel=
"stylesheet"
>
<!--js-->
<script src=
"js/bootstrap/jquery-1.12.0.min.js"
type=
"text/javascript"
></script>
<script src=
"js/bootstrap/bootstrap.min.js"
></script>
<script src=
"js/bootstrap/bootstrap-table.js"
></script>
<script src=
"js/bootstrap/bootstrap-table-zh-CN.js"
></script>
|
二、table數據填充
bootStrap table獲取數據有兩種方式，一是經過table 的data-url屬性指定數據源，二是經過JavaScript初始化表格時指定url來獲取數據
|
1
2
3
4
5
|
<table data-toggle=
"table"
>
<thead>
...
</thead>
</table>
|
...
|
1
2
3
|
$(
'#table'
).bootstrapTable({
url:
'data.json'
});
|
第二種方式交第一種而言在處理複雜數據時更爲靈活，通常使用第二種方式來進行table數據填充。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
|
$(function () {
//1.初始化Table
var oTable =
new
TableInit();
oTable.Init();
//2.初始化Button的點擊事件
/* var oButtonInit = new ButtonInit();
oButtonInit.Init(); */
});
var TableInit = function () {
var oTableInit =
new
Object();
//初始化Table
oTableInit.Init = function () {
$(
'#tradeList'
).bootstrapTable({
url:
'/VenderManager/TradeList'
,
//請求後臺的URL（*）
method:
'post'
,
//請求方式（*）
toolbar:
'#toolbar'
,
//工具按鈕用哪一個容器
striped:
true
,
//是否顯示行間隔色
cache:
false
,
//是否使用緩存，默認爲true，因此通常狀況下須要設置一下這個屬性（*）
pagination:
true
,
//是否顯示分頁（*）
sortable:
false
,
//是否啓用排序
sortOrder:
"asc"
,
//排序方式
queryParams: oTableInit.queryParams,
//傳遞參數（*）
sidePagination:
"server"
,
//分頁方式：client客戶端分頁，server服務端分頁（*）
pageNumber:
1
,
//初始化加載第一頁，默認第一頁
pageSize:
50
,
//每頁的記錄行數（*）
pageList: [
10
,
25
,
50
,
100
],
//可供選擇的每頁的行數（*）
strictSearch:
true
,
clickToSelect:
true
,
//是否啓用點擊選中行
height:
460
,
//行高，若是沒有設置height屬性，表格自動根據記錄條數以爲表格高度
uniqueId:
"id"
,
//每一行的惟一標識，通常爲主鍵列
cardView:
false
,
//是否顯示詳細視圖
detailView:
false
,
//是否顯示父子表
columns: [{
field:
'id'
,
title:
'序號'
}, {
field:
'liushuiid'
,
title:
'交易編號'
}, {
field:
'orderid'
,
title:
'訂單號'
}, {
field:
'receivetime'
,
title:
'交易時間'
}, {
field:
'price'
,
title:
'金額'
}, {
field:
'coin_credit'
,
title:
'投入硬幣'
}, {
field:
'bill_credit'
,
title:
'投入紙幣'
}, {
field:
'changes'
,
title:
'找零'
}, {
field:
'tradetype'
,
title:
'交易類型'
},{
field:
'goodmachineid'
,
title:
'貨機號'
},{
field:
'inneridname'
,
title:
'貨道號'
},{
field:
'goodsName'
,
title:
'商品名稱'
}, {
field:
'changestatus'
,
title:
'支付'
},{
field:
'sendstatus'
,
title:
'出貨'
},]
});
};
//獲得查詢的參數
oTableInit.queryParams = function (params) {
var temp = {
//這裏的鍵的名字和控制器的變量名必須一直，這邊改動，控制器也須要改爲同樣的
limit: params.limit,
//頁面大小
offset: params.offset,
//頁碼
sdate: $(
"#stratTime"
).val(),
edate: $(
"#endTime"
).val(),
sellerid: $(
"#sellerid"
).val(),
orderid: $(
"#orderid"
).val(),
CardNumber: $(
"#CardNumber"
).val(),
maxrows: params.limit,
pageindex:params.pageNumber,
portid: $(
"#portid"
).val(),
CardNumber: $(
"#CardNumber"
).val(),
tradetype:$(
'input:radio[name="tradetype"]:checked'
).val(),
success:$(
'input:radio[name="success"]:checked'
).val(),
};
return
temp;
};
return
oTableInit;
};
|
field字段必須與服務器端返回的字段對應纔會顯示出數據。
三、後臺獲取數據
a、servlet獲取數據
|
1
2
3
4
5
6
7
8
9
10
11
12
|
BufferedReader bufr =
new
BufferedReader(
new
InputStreamReader(request.getInputStream(),
"UTF-8"
));
StringBuilder sBuilder =
new
StringBuilder(
""
);
String temp =
""
;
while
((temp = bufr.readLine()) !=
null
){
sBuilder.append(temp);
}
bufr.close();
String json = sBuilder.toString();
JSONObject json1 = JSONObject.fromObject(json);
String sdate= json1.getString(
"sdate"
);
//經過此方法獲取前端數據
...
|
b、springMvc Controller裏面對應的方法獲取數據
|
1
2
3
4
|
public
JsonResult GetDepartment(
int
limit,
int
offset, string orderId, string SellerId，PortId，CardNumber，Success，maxrows，tradetype)
{
...
}
|
四、分頁(遇到問題最多的)
使用分頁，server端返回的數據必須包括rows和total，代碼以下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
...<br>gblst = SqlADO.getTradeList(sql,pageindex,maxrows);
JSONArray jsonData=
new
JSONArray();
JSONObject jo=
null
;
for
(
int
i=
0
,len=gblst.size();i<len;i++)
{
TradeBean tb = gblst.get(i);
if
(tb==
null
)
{
continue
;
}
jo=
new
JSONObject();
jo.put(
"id"
, i+
1
);
jo.put(
"liushuiid"
, tb.getLiushuiid());
jo.put(
"price"
, String.format(
"%1.2f"
,tb.getPrice()/
100.0
));
jo.put(
"mobilephone"
, tb.getMobilephone());
jo.put(
"receivetime"
, ToolBox.getYMDHMS(tb.getReceivetime()));
jo.put(
"tradetype"
, clsConst.TRADE_TYPE_DES[tb.getTradetype()]);
jo.put(
"changestatus"
, (tb.getChangestatus()!=
0
)?
"成功"
:
"失敗"
);
jo.put(
"sendstatus"
, (tb.getSendstatus()!=
0
)?
"成功"
:
"失敗"
);
jo.put(
"bill_credit"
, String.format(
"%1.2f"
,tb.getBill_credit()/
100.0
));
jo.put(
"changes"
,String.format(
"%1.2f"
,tb.getChanges()/
100.0
));
jo.put(
"goodroadid"
, tb.getGoodroadid());
jo.put(
"SmsContent"
, tb.getSmsContent());
jo.put(
"orderid"
, tb.getOrderid());
jo.put(
"goodsName"
, tb.getGoodsName());
jo.put(
"inneridname"
, tb.getInneridname());
jo.put(
"xmlstr"
, tb.getXmlstr());
jsonData.add(jo);
}
int
TotalCount=SqlADO.getTradeRowsCount(sql);
JSONObject jsonObject=
new
JSONObject();
jsonObject.put(
"rows"
, jsonData);
//JSONArray
jsonObject.put(
"total"
,TotalCount);
//總記錄數
out.print(jsonObject.toString()); <br>...
|
五、分頁界面內容介紹
前端獲取分頁數據，代碼以下：
|
1
2
3
4
5
6
7
8
9
|
...<br>oTableInit.queryParams = function (params) {
var temp = {
//這裏的鍵的名字和控制器的變量名必須一直，這邊改動，控制器也須要改爲同樣的
limit: params.limit,
//第幾條記錄
offset: params.offset,
//顯示一頁多少記錄
sdate: $(
"#stratTime"
).val(),
};
return
temp;
};<br>...
|
後端獲取分頁數據,代碼以下：
|
1
2
3
4
5
6
7
|
...<br>
int
pageindex=
0
;
int
offset = ToolBox.filterInt(json1.getString(
"offset"
));
int
limit = ToolBox.filterInt(json1.getString(
"limit"
));
if
(offset !=
0
){
pageindex = offset/limit;
}
pageindex+=
1
;
//第幾頁<br>...
|
最近客戶提出需求，想將原有的管理系統，作下優化，經過手機也能很好展示，想到2個方案:
a方案：保留原有的頁面，新設計一套適合手機的頁面，當手機訪問時，進入m.zhy.com(手機頁面)，pc設備訪問時，進入www.zhy.com(pc頁面)
b方案：採用bootstrap框架,替換原有頁面，自動適應手機、平板、PC 設備
採用a方案，須要設計一套界面，而且要得從新寫適合頁面的接口，考慮到時間及成本問題，故項目採用了b方案
1、效果展現
2、BootStrap table簡單介紹
|
1
|
bootStrap table 是一個輕量級的table插件，使用AJAX獲取JSON格式的數據，其分頁和數據填充很方便，支持國際化
|
3、使用方法
一、引入js、css
|
1
2
3
4
5
6
7
8
|
<!--css樣式-->
<link href=
"css/bootstrap/bootstrap.min.css"
rel=
"stylesheet"
>
<link href=
"css/bootstrap/bootstrap-table.css"
rel=
"stylesheet"
>
<!--js-->
<script src=
"js/bootstrap/jquery-1.12.0.min.js"
type=
"text/javascript"
></script>
<script src=
"js/bootstrap/bootstrap.min.js"
></script>
<script src=
"js/bootstrap/bootstrap-table.js"
></script>
<script src=
"js/bootstrap/bootstrap-table-zh-CN.js"
></script>
|
二、table數據填充
bootStrap table獲取數據有兩種方式，一是經過table 的data-url屬性指定數據源，二是經過JavaScript初始化表格時指定url來獲取數據
|
1
2
3
4
5
|
<table data-toggle=
"table"
>
<thead>
...
</thead>
</table>
|
...
|
1
2
3
|
$(
'#table'
).bootstrapTable({
url:
'data.json'
});
|
第二種方式交第一種而言在處理複雜數據時更爲靈活，通常使用第二種方式來進行table數據填充。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
|
相關文章
- 1. BootStrap table使用
- 2. Bootstrap Table使用
- 3. bootstrap table 使用
- 4. Bootstrap-table使用
- 5. bootstrap 表格插件bootstrap-table的使用
- 6. Bootstrap - Bootstrap Table使用的學習總結
- 7. bootstrap-table的簡單使用
- 8. BootStrap Table使用小結
- 9. Bootstrap Table使用分享
- 10. Bootstrap Table使用整理（一）
- 更多相關文章...
- • Spring通知類型及使用ProxyFactoryBean創建AOP代理 - Spring教程
- • TortoiseSVN 使用教程 - SVN 教程
- • Composer 安裝與使用
- • 使用Rxjava計算圓周率
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 在windows下的虛擬機中,安裝華爲電腦的deepin操作系統
- 2. 強烈推薦款下載不限速解析神器
- 3. 【區塊鏈技術】孫宇晨：區塊鏈技術帶來金融服務的信任變革
- 4. 搜索引起的鏈接分析-計算網頁的重要性
- 5. TiDB x 微衆銀行 | 耗時降低 58%，分佈式架構助力實現普惠金融
- 6. 《數字孿生體技術白皮書》重磅發佈（附完整版下載）
- 7. 雙十一「避坑」指南：區塊鏈電子合同爲電商交易保駕護航！
- 8. 區塊鏈產業，怎樣「鏈」住未來？
- 9. OpenglRipper使用教程
- 10. springcloud請求一次好用一次不好用zuul Name or service not known
歡迎關注本站公眾號,獲取更多信息
