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的用法是什么,具体怎样应用”的文章就介绍到这了,感谢各位的阅读,更多相关Bootstrap中table的用法是什么,具体怎样应用内容,欢迎关注网络资讯频道,小编将为大家输出更多高质量的实用文章!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: Bootstrap中table的用法是什么,具体怎样应用
本文地址: https://pptw.com/jishu/653954.html