前端之家收集整理的这篇文章主要介绍了
JS组件Bootstrap Table使用方法详解，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
最近客户提出需求，想将原有的管理系统，做下优化，通过手机也能很好展现，想到2个方案:
a方案：保留原有的页面，新设计一套适合手机的页面，当手机访问时，进入m.zhy.com(手机页面)，pc设备访问时，进入www.zhy.com(pc页面)
b方案：采用bootstrap框架,替换原有页面，自动适应手机、平板、PC 设备
采用a方案，需要设计一套界面，并且要得重新写适合页面的接口，考虑到时间及成本问题，故项目采用了b方案
二、BootStrap table简单介绍
bootStrap table 是一个轻量级的table插件，使用AJAX获取JSON格式的数据，其分页和数据填充很方便，支持国际化
1、引入js、css
2、table数据填充
bootStrap table获取数据有两种方式，一是通过table 的data-url属性指定数据源，二是通过JavaScript初始化表格时指定url来获取数据
...
<div class="jb51code">
<pre class="brush:xhtml;">
$('#table').bootstrapTable({
url: 'data.json'
});
//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(),tradetype:$('input:radio[name="tradetype"]:checked').val(),success:$('input:radio[name="success"]:checked').val(),};
return temp;
};
return oTableInit;
};
