Bootstrap table使用方法汇总


Posted in Javascript onNovember 17, 2017

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)
{
 ...
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在jquery中处理带有命名空间的XML数据
Jun 13 Javascript
javascript中[]和{}对象使用介绍
Mar 20 Javascript
地址栏传递中文参数乱码在js里用escape转码
Aug 28 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
Nov 17 Javascript
老生常谈 js中this的指向
Jun 30 Javascript
最原始的jQuery注册验证方式
Oct 11 Javascript
JS创建对象的写法示例
Nov 04 Javascript
JavaScript门面模式详解
Oct 19 Javascript
微信小程序收货地址API兼容低版本解决方法
May 18 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
Jun 10 Javascript
JS面向对象编程实现的Tab选项卡案例详解
Mar 03 Javascript
Vue+element-ui添加自定义右键菜单的方法示例
Dec 08 Vue.js
Vue.js与 ASP.NET Core 服务端渲染功能整合
Nov 16 #Javascript
使用3D引擎threeJS实现星空粒子移动效果
Sep 13 #Javascript
vue.js项目打包上线的图文教程
Nov 16 #Javascript
Three.js基础学习教程
Nov 16 #Javascript
three.js实现3D视野缩放效果
Nov 16 #Javascript
three.js中3D视野的缩放实现代码
Nov 16 #Javascript
js的函数的按值传递参数(实例讲解)
Nov 16 #Javascript
You might like
中国第一家无线电行
2021/03/01 无线电
php类常量的使用详解
2013/06/08 PHP
PHP会话操作之cookie用法分析
2016/09/28 PHP
PHPCMS忘记后台密码的解决办法
2016/10/30 PHP
JS验证控制输入中英文字节长度(input、textarea等)具体实例
2013/06/21 Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
2013/11/05 Javascript
jQuery中attr()方法用法实例
2015/01/05 Javascript
DOM基础教程之使用DOM控制表单
2015/01/20 Javascript
js实现图片漂浮效果的方法
2015/03/02 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
2015/08/21 Javascript
基于jQuery实现音乐播放试听列表
2016/04/14 Javascript
NodeJS使用七牛云存储上传文件的方法
2017/07/24 NodeJs
iframe与主框架跨域相互访问实现方法
2017/09/14 Javascript
详解vue-admin和后端(flask)分离结合的例子
2018/02/12 Javascript
vue el-table实现行内编辑功能
2019/12/11 Javascript
js实现点击上传图片并设为模糊背景
2020/08/02 Javascript
[54:17]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第二场 1月10日
2021/03/11 DOTA
详尽讲述用Python的Django框架测试驱动开发的教程
2015/04/22 Python
Python编程实现生成特定范围内不重复多个随机数的2种方法
2017/04/14 Python
python数据结构之列表和元组的详解
2017/09/23 Python
Tensorflow 自带可视化Tensorboard使用方法(附项目代码)
2018/02/10 Python
分分钟入门python语言
2018/03/20 Python
浅谈pyqt5中信号与槽的认识
2019/02/17 Python
Python自动抢红包教程详解
2019/06/11 Python
python算法与数据结构之冒泡排序实例详解
2019/06/22 Python
python抓取多种类型的页面方法实例
2019/11/20 Python
解决tensorflow打印tensor有省略号的问题
2020/02/04 Python
美国大尺码女装零售商:TORRID
2016/10/01 全球购物
C++面试题:关于链表和指针
2013/06/05 面试题
医学实习生自我鉴定
2013/12/12 职场文书
大家访活动实施方案
2014/03/10 职场文书
护校行动方案
2014/05/31 职场文书
学习教师敬业奉献模范事迹材料思想汇报
2014/09/19 职场文书
教师作风整改措施思想汇报
2014/10/12 职场文书
2014年学校后勤工作总结
2014/12/06 职场文书
单位介绍信格式
2015/01/31 职场文书