BootStrap table使用方法分析
更新時(shí)間：2016年11月08日 11:24:37 作者：y酒味i
這篇文章主要為大家詳細(xì)介紹了JS組件Bootstrap Table使用方法，具有一定的實(shí)用性和參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了BootStrap table的使用方法，供大家參考，具體內(nèi)容如下
bootstrap table git address：https://github.com/wenzhixin/bootstrap-table
引入文件
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css"/> <link rel="stylesheet" href="../bower_components/bootstrap-table-develop/dist/bootstrap-table.min.css"/> <script type="text/javascript" src="../bower_components/jquery/dist/jquery.min.js"></script> <script type="text/javascript" src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script> <script type="text/javascript" src="../bower_components/bootstrap-table-develop/dist/bootstrap-table.js"></script> <script type="text/javascript" src="../bower_components/bootstrap-table-develop/dist/locale/bootstrap-table-zh-CN.js"></script>
使用方式
<table data-toggle="table" data-url="data.json"> <thead> ... </thead> </table>
or
<table id="table" class="mychar1-table"></table>
$('#table').bootstrapTable({
url: 'data.json'
});
第二種更好理解點(diǎn)：
var $table = $('#mychart1');
$table.bootstrapTable({
url: reqprojectname_w+'list/spectrumlist',
dataType: "json",
toolbar: '#toolbar', //工具按鈕用哪個(gè)容器
striped: true, //是否顯示行間隔色
singleSelect: false,
pagination: true, //分頁(yè)
pageNumber:1, //初始化加載第一頁(yè)，默認(rèn)第一頁(yè)
pageSize: 10, //每頁(yè)的記錄行數(shù)（*）
pageList: [10, 25, 50, 100], //可供選擇的每頁(yè)的行數(shù)（*）
search: false, //顯示搜索框
sidePagination: "server", //服務(wù)端處理分頁(yè)
columns: [{
field: 'id',
title: '序號(hào)'
}, {
field: 'liushuiid',
title: '交易編號(hào)'
}, {
field: 'orderid',
title: '訂單號(hào)'
}, {
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ī)號(hào)'
},{
field: 'inneridname',
title: '貨道號(hào)'
},{
field: 'goodsName',
title: '商品名稱'
}, {
field: 'changestatus',
title: '支付'
},{
field: 'sendstatus',
title: '出貨'
},
{
title: '操作',
field: 'id',
align: 'center',
formatter:function(value,row,index){
var e = '<a href="#" mce_href="#" onclick="edit(\''+ row.id + '\')">編輯</a> ';
var d = '<a href="#" mce_href="#" onclick="del(\''+ row.id +'\')">刪除</a> ';
return e+d;
}
}
]
});
詳細(xì)介紹
$(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', //請(qǐng)求后臺(tái)的URL（*）
method: 'post', //請(qǐng)求方式（*）
toolbar: '#toolbar', //工具按鈕用哪個(gè)容器
striped: true, //是否顯示行間隔色
cache: false, //是否使用緩存，默認(rèn)為true，所以一般情況下需要設(shè)置一下這個(gè)屬性（*）
pagination: true, //是否顯示分頁(yè)（*）
sortable: false, //是否啟用排序
sortOrder: "asc", //排序方式
queryParams: oTableInit.queryParams,//傳遞參數(shù)（*）
sidePagination: "server", //分頁(yè)方式：client客戶端分頁(yè)，server服務(wù)端分頁(yè)（*）
pageNumber:1, //初始化加載第一頁(yè)，默認(rèn)第一頁(yè)
pageSize: 50, //每頁(yè)的記錄行數(shù)（*）
pageList: [10, 25, 50, 100], //可供選擇的每頁(yè)的行數(shù)（*）
strictSearch: true,
clickToSelect: true, //是否啟用點(diǎn)擊選中行
height: 460, //行高，如果沒有設(shè)置height屬性，表格自動(dòng)根據(jù)記錄條數(shù)覺得表格高度
uniqueId: "id", //每一行的唯一標(biāo)識(shí)，一般為主鍵列
cardView: false, //是否顯示詳細(xì)視圖
detailView: false, //是否顯示父子表
columns: [{
field: 'id',
title: '序號(hào)'
}, {
field: 'liushuiid',
title: '交易編號(hào)'
}, {
field: 'orderid',
title: '訂單號(hào)'
}, {
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ī)號(hào)'
},{
field: 'inneridname',
title: '貨道號(hào)'
},{
field: 'goodsName',
title: '商品名稱'
}, {
field: 'changestatus',
title: '支付'
},{
field: 'sendstatus',
title: '出貨'
},]
});
};
//得到查詢的參數(shù)
oTableInit.queryParams = function (params) {
var temp = { //這里的鍵的名字和控制器的變量名必須一直，這邊改動(dòng)，控制器也需要改成一樣的
limit: params.limit, //頁(yè)面大小
offset: params.offset, //頁(yè)碼
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;
};
請(qǐng)求參數(shù)
oTableInit.queryParams = function (params) {
var temp = { //這里的鍵的名字和控制器的變量名必須一直，這邊改動(dòng)，控制器也需要改成一樣的
limit: params.limit, //第幾條記錄
offset: params.offset, //顯示一頁(yè)多少記錄
sdate: $("#stratTime").val(),
};
return temp;
};
后臺(tái)拼裝測(cè)試數(shù)據(jù)
JSONArray jsonData=new JSONArray();
JSONObject jo=null;
for (int i=0,len=10;i<len;i++){
jo=new JSONObject();
jo.put("id", i+(j++));
jo.put("liushuiid", i+1);
jo.put("price", 100);
jo.put("mobilephone",10);
jo.put("receivetime", 10);
jo.put("tradetype", 10);
jo.put("changestatus", "成功");
jo.put("sendstatus", "失敗");
jo.put("bill_credit", 10);
jo.put("goodroadid", 10);
jo.put("SmsContent", 10);
jo.put("orderid", 10);
jo.put("goodsName", 10);
jo.put("inneridname", 10);
jo.put("xmlstr", 10);
jsonData.add(jo);
}
int TotalCount=97;
JSONObject jsonObject=new JSONObject();
jsonObject.put("rows", jsonData);//JSONArray
jsonObject.put("total",TotalCount);//總記錄數(shù)
分頁(yè)接收
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;//第幾頁(yè)<br>...
分頁(yè)時(shí)BootStrap table 向后端傳遞兩個(gè)分頁(yè)字段：limit， offset ,前者表示每頁(yè)的個(gè)數(shù)，默認(rèn)為10個(gè)，后者表示分頁(yè)時(shí)數(shù)據(jù)的偏移量。
而搜索時(shí)則向后端傳遞的是search字段，表示具體的搜索內(nèi)容。
服務(wù)器端返回的數(shù)據(jù)中還要包括page（頁(yè)數(shù)），total（數(shù)據(jù)總量）兩個(gè)字段，前端要根據(jù)這兩個(gè)字段分頁(yè)。
如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附兩個(gè)精彩的專題：Bootstrap學(xué)習(xí)教程 Bootstrap實(shí)戰(zhàn)教程
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Bootstrap Table使用整理（三）
- Bootstrap Table使用整理(二)
- Bootstrap Table使用整理(一)
- Bootstrap Table使用整理(五)之分頁(yè)組合查詢
- BootstrapTable refresh 方法使用實(shí)例簡(jiǎn)單介紹
- Bootstrap table使用方法詳細(xì)介紹
- 值得分享的Bootstrap Table使用教程
- DataTables+BootStrap組合使用Ajax來獲取數(shù)據(jù)并且動(dòng)態(tài)加載dom的方法（排序，過濾，分頁(yè)等）
- Bootstrap Table使用整理（四）之工具欄
相關(guān)文章
關(guān)于bootstrap日期轉(zhuǎn)化,bootstrap-editable的簡(jiǎn)單使用，bootstrap-fileinput的
這篇文章主要介紹了關(guān)于bootstrap日期轉(zhuǎn)化,bootstrap-editable的簡(jiǎn)單使用，bootstrap-fileinput的使用,需要的朋友可以參考下2017-05-05
JavaScript 如何計(jì)算文本的行數(shù)的實(shí)現(xiàn)
這篇文章主要介紹了JavaScript 如何計(jì)算文本的行數(shù)的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
JS實(shí)現(xiàn)求數(shù)組起始項(xiàng)到終止項(xiàng)之和的方法【基于數(shù)組擴(kuò)展函數(shù)】
這篇文章主要介紹了JS實(shí)現(xiàn)求數(shù)組起始項(xiàng)到終止項(xiàng)之和的方法,基于數(shù)組擴(kuò)展函數(shù)實(shí)現(xiàn)該功能,涉及javascript針對(duì)數(shù)組的簡(jiǎn)單判斷、遍歷等相關(guān)操作技巧,需要的朋友可以參考下2017-06-06
默認(rèn)情況javascript是同步加載的,javascript的加載時(shí)阻塞的，后面的元素要等待javascript加載完畢后才能進(jìn)行再加載,如何解決這個(gè)問題呢,接下來將為你詳細(xì)介紹下異步加載js三種實(shí)現(xiàn)方案,感興趣的你可以參考下哈2013-03-03
這篇文章主要介紹了JavaScript鍵盤事件常見用法,簡(jiǎn)單描述了javascript鍵盤事件的分類、功能,并結(jié)合實(shí)例形式給出了javascript響應(yīng)鍵盤事件相關(guān)使用技巧,需要的朋友可以參考下2019-01-01
這篇文章主要介紹了webpack之devtool詳解,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-02-02
window.open關(guān)于瀏覽器攔截問題分析及解決方法
window.open是javascript函數(shù)，該函數(shù)的作用是打開一個(gè)新窗口或這改變?cè)瓉淼拇翱?如果你直接在js中調(diào)用window.open()函數(shù)去打開一個(gè)新窗口，瀏覽器會(huì)攔截你,那么如何避免呢，感興趣的朋友可以了解下本文或許對(duì)你學(xué)習(xí)有所幫助2013-02-02
JS+CSS實(shí)現(xiàn)電子商務(wù)網(wǎng)站導(dǎo)航模板效果代碼
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)電子商務(wù)網(wǎng)站導(dǎo)航模板效果代碼,涉及JavaScript結(jié)合css動(dòng)態(tài)操作頁(yè)面元素屬性的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-09-09
JS(JQuery)操作Array的相關(guān)方法介紹
本篇文章主要是對(duì)JS(JQuery)操作Array的相關(guān)方法進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-02-02
JavaScript實(shí)現(xiàn)一個(gè)簡(jiǎn)易的計(jì)算器實(shí)例代碼
這篇文章主要介紹了JavaScript實(shí)現(xiàn)一個(gè)簡(jiǎn)易的計(jì)算器實(shí)例代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助，一起跟隨小編過來看看吧2018-05-05