JS組件Bootstrap Table使用方法詳解
更新時(shí)間：2016年02月02日 10:01:35 作者：緣天
這篇文章主要為大家詳細(xì)介紹了JS組件Bootstrap Table使用方法，具有一定的實(shí)用性，感興趣的小伙伴們可以參考一下
最近客戶提出需求，想將原有的管理系統(tǒng)，做下優(yōu)化，通過手機(jī)也能很好展現(xiàn)，想到2個(gè)方案:
a方案：保留原有的頁面，新設(shè)計(jì)一套適合手機(jī)的頁面，當(dāng)手機(jī)訪問時(shí)，進(jìn)入m.zhy.com(手機(jī)頁面)，pc設(shè)備訪問時(shí)，進(jìn)入www.zhy.com(pc頁面)
b方案：采用bootstrap框架,替換原有頁面，自動適應(yīng)手機(jī)、平板、PC 設(shè)備
采用a方案，需要設(shè)計(jì)一套界面，并且要得重新寫適合頁面的接口，考慮到時(shí)間及成本問題，故項(xiàng)目采用了b方案
一、效果展示
二、BootStrap table簡單介紹
bootStrap table 是一個(gè)輕量級的table插件，使用AJAX獲取JSON格式的數(shù)據(jù)，其分頁和數(shù)據(jù)填充很方便，支持國際化
三、使用方法
1、引入js、css
<!--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>
2、table數(shù)據(jù)填充
bootStrap table獲取數(shù)據(jù)有兩種方式，一是通過table 的data-url屬性指定數(shù)據(jù)源，二是通過JavaScript初始化表格時(shí)指定url來獲取數(shù)據(jù)
<table data-toggle="table"> <thead> ... </thead> </table> ...
$('#table').bootstrapTable({
url: 'data.json'
});
第二種方式交第一種而言在處理復(fù)雜數(shù)據(jù)時(shí)更為靈活，一般使用第二種方式來進(jìn)行table數(shù)據(jù)填充。
$(function () {
//1.初始化Table
var oTable = new TableInit();
oTable.Init();
//2.初始化Button的點(diǎn)擊事件
/* 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', //工具按鈕用哪個(gè)容器
striped: true, //是否顯示行間隔色
cache: false, //是否使用緩存，默認(rèn)為true，所以一般情況下需要設(shè)置一下這個(gè)屬性（*）
pagination: true, //是否顯示分頁（*）
sortable: false, //是否啟用排序
sortOrder: "asc", //排序方式
queryParams: oTableInit.queryParams,//傳遞參數(shù)（*）
sidePagination: "server", //分頁方式：client客戶端分頁，server服務(wù)端分頁（*）
pageNumber:1, //初始化加載第一頁，默認(rèn)第一頁
pageSize: 50, //每頁的記錄行數(shù)（*）
pageList: [10, 25, 50, 100], //可供選擇的每頁的行數(shù)（*）
strictSearch: true,
clickToSelect: true, //是否啟用點(diǎn)擊選中行
height: 460, //行高，如果沒有設(shè)置height屬性，表格自動根據(jù)記錄條數(shù)覺得表格高度
uniqueId: "id", //每一行的唯一標(biāo)識，一般為主鍵列
cardView: false, //是否顯示詳細(xì)視圖
detailView: false, //是否顯示父子表
columns: [{
field: 'id',
title: '序號'
}, {
field: 'liushuiid',
title: '交易編號'
}, {
field: 'orderid',
title: '訂單號'
}, {
field: 'receivetime',
title: '交易時(shí)間'
}, {
field: 'price',
title: '金額'
}, {
field: 'coin_credit',
title: '投入硬幣'
}, {
field: 'bill_credit',
title: '投入紙幣'
}, {
field: 'changes',
title: '找零'
}, {
field: 'tradetype',
title: '交易類型'
},{
field: 'goodmachineid',
title: '貨機(jī)號'
},{
field: 'inneridname',
title: '貨道號'
},{
field: 'goodsName',
title: '商品名稱'
}, {
field: 'changestatus',
title: '支付'
},{
field: 'sendstatus',
title: '出貨'
},]
});
};
//得到查詢的參數(shù)
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字段必須與服務(wù)器端返回的字段對應(yīng)才會顯示出數(shù)據(jù)。
3、后臺獲取數(shù)據(jù)
a、servlet獲取數(shù)據(jù)
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");//通過此方法獲取前端數(shù)據(jù)
...
b、springMvc Controller里面對應(yīng)的方法獲取數(shù)據(jù)
public JsonResult GetDepartment(int limit, int offset, string orderId, string SellerId，PortId，CardNumber，Success，maxrows，tradetype)
{
...
}
4、分頁(遇到問題最多的)
使用分頁，server端返回的數(shù)據(jù)必須包括rows和total，代碼如下：
...<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);//總記錄數(shù)
out.print(jsonObject.toString()); <br>...
5、分頁界面內(nèi)容介紹
前端獲取分頁數(shù)據(jù)，代碼如下：
...<br>oTableInit.queryParams = function (params) {
var temp = { //這里的鍵的名字和控制器的變量名必須一直，這邊改動，控制器也需要改成一樣的
limit: params.limit, //第幾條記錄
offset: params.offset, //顯示一頁多少記錄
sdate: $("#stratTime").val(),
};
return temp;
};<br>...
后端獲取分頁數(shù)據(jù),代碼如下：
...<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>...
如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附3個(gè)精彩的專題：
以上就是為大家分享的Bootstrap Table使用方法，希望對大家熟練掌握Bootstrap Table使用方法有所幫助。
您可能感興趣的文章:
- JS表格組件神器bootstrap table詳解（基礎(chǔ)版）
- JS獲取Table中td值的方法
- JS動態(tài)添加Table的TR，TD實(shí)現(xiàn)方法
- JavaScript獲取table中某一列的值的方法
- Sortable.js拖拽排序使用方法解析
- Js獲取table當(dāng)前tr行的值的代碼
- JS實(shí)現(xiàn)動態(tài)生成html table表格的方法分析
- js操作table示例(個(gè)人心得)
- js實(shí)現(xiàn)table添加行tr、刪除行tr、清空行tr的簡單實(shí)例
- JavaScript操作table表格：遍歷、列讀取、刪除行、更新列等動態(tài)管理
相關(guān)文章
javascript斷點(diǎn)調(diào)試心得分享
javascript中程序是怎么可以中斷執(zhí)行，然后一步一步走下去。而且debug的時(shí)候，可以看到變量，調(diào)用棧等東西。這個(gè)是如何實(shí)現(xiàn)的？2016-04-04
根據(jù)服務(wù)器時(shí)間作為起始，顯示時(shí)鐘的小程序
一般的網(wǎng)頁都有這種功能：在頁面上動態(tài)顯示當(dāng)前時(shí)間，這個(gè)的實(shí)現(xiàn)也很簡單，基本上一行代碼就實(shí)現(xiàn)了2009-06-06
Javascript表單序列化原理及實(shí)現(xiàn)代碼詳解
這篇文章主要介紹了Javascript表單序列化原理及實(shí)現(xiàn)代碼詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-10-10
JavaScript數(shù)組every方法的應(yīng)用場景實(shí)例
every方法確定數(shù)組中的每一項(xiàng)的結(jié)果都滿足所寫的條件的時(shí)候,就會返回true,否則返回false,這篇文章主要給大家介紹了關(guān)于JavaScript數(shù)組every方法應(yīng)用場景的相關(guān)資料,需要的朋友可以參考下2022-12-12
微信小程序使用uni-app和springboot實(shí)現(xiàn)一鍵登錄功能(JWT鑒權(quán))
微信一鍵登錄是指用戶在使用小程序時(shí),可以通過微信賬號進(jìn)行快速登錄,而無需額外的注冊和密碼設(shè)置,這篇文章主要給大家介紹了關(guān)于微信小程序使用uni-app和springboot實(shí)現(xiàn)一鍵登錄功能的相關(guān)資料,需要的朋友可以參考下2023-11-11
點(diǎn)擊進(jìn)行復(fù)制的JS代碼實(shí)例
這篇文章介紹了點(diǎn)擊進(jìn)行復(fù)制的JS代碼實(shí)例，有需要的朋友可以參考一下2013-08-08
在子窗口中關(guān)閉父窗口在某些特殊的情況下還是有存在的必要的，其實(shí)很簡單，只需一句代碼便可實(shí)現(xiàn)，感興趣的朋友可以了解下2013-10-10
uniapp基礎(chǔ)知識點(diǎn)掌握以及面試題整理
uni-app是一個(gè)使用vue.js開發(fā)所有前端應(yīng)用的框架,開發(fā)者編寫一套代碼,下面這篇文章主要給大家介紹了關(guān)于uniapp基礎(chǔ)知識點(diǎn)掌握以及面試題整理的相關(guān)資料,需要的朋友可以參考下2023-02-02
在開發(fā)的時(shí)候?yàn)槭裁醋筮叺臄?shù)據(jù)出來比右邊的慢呢？因?yàn)檫@里沒有進(jìn)行分頁，左邊的數(shù)據(jù)多，所以查詢相對較慢。怎么解決此問題呢？下面小編給大家?guī)砹薐S鼠標(biāo)滾動分頁效果示例，需要的的朋友參考下吧2017-07-07
解決Layui當(dāng)中的導(dǎo)航條動態(tài)添加后渲染失敗的問題
今天小編就為大家分享一篇解決Layui當(dāng)中的導(dǎo)航條動態(tài)添加后渲染失敗的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09