Bootstrap table使用方法汇总

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

2、table数据填充

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

...

...

...

$('#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 oTablcTkyzMXAeInit;

};

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)

{

...

}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。