Bootstrap table使用方法汇总

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

<!--css样式-->

<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet">

<link href="css/bootstrap/bootstrap-table.css" rel="stylesheet">

<!--js-->

<script src="js/bootstrap/jquery-1.12.0.min.js" type="text/javascript"></script>

<script src="js/bootstrap/bootstrap.min.js"></script>

<script src="js/bootstrap/bootstrap-table.js"></script>

<script src="js/bootstrap/bootstrap-table-zh-CN.js"></script>

2、table数据填充

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

<table data-toggle="table">

<thead>

...

</thead>

</table>

...

$('#table').bootstrapTable({

url: 'data.json'

});

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

$(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;

};

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

3、后台获取数据

a、servlet获取数据

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里面对应的方法获取数据

public JsonResult GetDepartment(int limit, int offset, string orderId, string SellerId,PortId,CardNumber,Success,maxrows,tradetype)

{

...

}

以上是 Bootstrap table使用方法汇总 的全部内容, 来源链接: utcz.com/z/336881.html

回到顶部