BootStrap table使用方法分析
作者：y酒味i
这篇文章主要为大家详细介绍了JS组件Bootstrap Table使用方法，具有一定的实用性和参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了BootStrap table的使用方法，供大家参考，具体内容如下
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'
});
第二种更好理解点：
var $table = $('#mychart1');
$table.bootstrapTable({
url: reqprojectname_w+'list/spectrumlist',
dataType: "json",
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
singleSelect: false,
pagination: true, //分页
pageNumber:1, //初始化加载第一页，默认第一页
pageSize: 10, //每页的记录行数（*）
pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
search: false, //显示搜索框
sidePagination: "server", //服务端处理分页
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: '出货'
},
{
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;
}
}
]
});
详细介绍
$(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;
};
请求参数
oTableInit.queryParams = function (params) {
var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
limit: params.limit, //第几条记录
offset: params.offset, //显示一页多少记录
sdate: $("#stratTime").val(),
};
return temp;
};
后台拼装测试数据
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);//总记录数
分页接收
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>...
分页时BootStrap table 向后端传递两个分页字段：limit， offset ,前者表示每页的个数，默认为10个，后者表示分页时数据的偏移量。
而搜索时则向后端传递的是search字段，表示具体的搜索内容。
服务器端返回的数据中还要包括page（页数），total（数据总量）两个字段，前端要根据这两个字段分页。
如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程 Bootstrap实战教程
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。