Bootstrap table使用方法汇总

2023-09-20 22:48:05 300

bootstrap-table是在bootstrap-table的基础上写出来的，专门用于显示数据的表格插件。而bootstrap是来自Twitter，是目前最受欢迎的前端框架。Bootstrap是基于HTML、CSS、JAVASCRIPT的，具有简便灵活，快速前端开发的优势。对与bootstrap在此就不在叙述。本文将着重讲解自己在项目中使用到bootstrap-table的一些理解和如何学习它。

首先交代一下，jquery，bootstrap，bootstrap-table三者之间的关系。bootstrap很多部分代码涉及到了jquery的，也就是说bootstrap是依赖jquery的，而我们要使用的bootstrap-table则是在bootstrap基础上创造出来的，所以在使用bootstrap-table之前必须引用jquery和bootstrap的相关js，css文件。

接着说，bootstrap-table的特点:与jquery-ui，jqgrid等表格显示插件而言，bootstrap-table扁平化，轻量级,对于一些轻量级的数据显示，他是绰绰有余，而对父子表等的支持也很好，最主要的是可以与bootstrap的其他标签无缝组合。

1、引入js、css

2、table数据填充

bootStraptable获取数据有两种方式，一是通过table的data-url属性指定数据源，二是通过JavaScript初始化表格时指定url来获取数据



...


...

$('#table').bootstrapTable({
url:'data.json'
});

第二种方式较第一种而言在处理复杂数据时更为灵活，一般使用第二种方式来进行table数据填充。

$(function(){

//1.初始化Table
varoTable=newTableInit();
oTable.Init();

//2.初始化Button的点击事件
/*varoButtonInit=newButtonInit();
oButtonInit.Init();*/

});


varTableInit=function(){
varoTableInit=newObject();
//初始化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){
vartemp={//这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
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(),
};
returntemp;
};
returnoTableInit;
};

field字段必须与服务器端返回的字段对应才会显示出数据。

3、后台获取数据

a、servlet获取数据

BufferedReaderbufr=newBufferedReader(
newInputStreamReader(request.getInputStream(),"UTF-8"));
StringBuildersBuilder=newStringBuilder("");
Stringtemp="";
while((temp=bufr.readLine())!=null){
sBuilder.append(temp);
}
bufr.close();
Stringjson=sBuilder.toString();
JSONObjectjson1=JSONObject.fromObject(json);
Stringsdate=json1.getString("sdate");//通过此方法获取前端数据
...

b、springMvcController里面对应的方法获取数据

publicJsonResultGetDepartment(intlimit,intoffset,stringorderId,stringSellerId，PortId，CardNumber，Success，maxrows，tradetype)
{
...
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

Bootstrap table使用方法汇总

热门推荐

随机推荐