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数据填充
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) { ... }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。