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
rush:js;">
2、table数据填充
bootStrap table获取数据有两种方式,一是通过table 的data-url属性指定数据源,二是通过JavaScript初始化表格时指定url来获取数据
<div class="jb51code">
<pre class="brush:xhtml;">
$('#table').bootstrapTable({
url: 'data.json'
});
第二种方式交第一种而言在处理复杂数据时更为灵活,一般使用第二种方式来进行table数据填充。
rush:js;">
$(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(),Tradetype:$('input:radio[name="Tradetype"]:checked').val(),success:$('input:radio[name="success"]:checked').val(),};
return temp;
};
return oTableInit;
};
field字段必须与服务器端返回的字段对应才会显示出数据。
3、后台获取数据
a、servlet获取数据
rush:js;">
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里面对应的方法获取数据
rush:js;">
public JsonResult GetDepartment(int limit,int offset,string orderId,string SellerId,PortId,CardNumber,Success,maxrows,
Tradetype)
{
...
}
4、分页(遇到问题最多的)
使用分页,server端返回的数据必须包括rows和total,代码如下:
rush:js;">
...
gblst =
sqlADO.get
TradeList(
sql,pageindex,maxrows);
JSONArray jsonData=new JSONArray();
JSONObject jo=null;
for (int i=0,len=gblst.size();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",tb.getBill_credit()/100.0));
jo.put("changes",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());
...
5、分页界面内容介绍
前端获取分页数据,代码如下:
rush:js;">
...
oTableInit.queryP
arams = function (p
arams) {
var temp = { //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
limit: p
arams.limit,//第几条记录
offset: p
arams.offset,//
显示一页多少记录
sdate: $("#stratTime").val(),};
return temp;
};
...
后端获取分页数据,代码如下:
rush:js;">
...
int pageindex=0;
int offset = Tool
Box.filterInt(json1.getString("offset"));
int limit = Tool
Box.filterInt(json1.getString("limit"));
if(offset !=0){
pageindex = offset/limit;
}
pageindex+= 1;//第几页
...
如果大家还想深入学习,可以点击进行学习,再为大家附3个精彩的专题:
插件使用教程
以上就是为大家分享的Bootstrap Table使用方法,希望对大家熟练掌握Bootstrap Table使用方法有所帮助。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。