JS组件Bootstrap Table使用方法详解


Posted in Javascript onFebruary 02, 2016

最近客户提出需求,想将原有的管理系统,做下优化,通过手机也能很好展现,想到2个方案:

a方案:保留原有的页面,新设计一套适合手机的页面,当手机访问时,进入m.zhy.com(手机页面),pc设备访问时,进入www.zhy.com(pc页面)

b方案:采用bootstrap框架,替换原有页面,自动适应手机、平板、PC 设备

采用a方案,需要设计一套界面,并且要得重新写适合页面的接口,考虑到时间及成本问题,故项目采用了b方案

一、效果展示

JS组件Bootstrap Table使用方法详解

二、BootStrap table简单介绍

bootStrap table 是一个轻量级的table插件,使用AJAX获取JSON格式的数据,其分页和数据填充很方便,支持国际化
三、使用方法

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

 4、分页(遇到问题最多的)
使用分页,server端返回的数据必须包括rows和total,代码如下:

...<br>gblst = SqlADO.getTradeList(sql,pageindex,maxrows);
JSONArray jsonData=new JSONArray();
 JSONObject jo=null;
 for (int i=0,len=gblst.size();i<len;i++)
 {
  TradeBean tb = gblst.get(i);
  if(tb==null)
  {
  continue;
  }
  jo=new JSONObject();
  jo.put("id", i+1);
  jo.put("liushuiid", tb.getLiushuiid());
  jo.put("price", String.format("%1.2f",tb.getPrice()/100.0));
  jo.put("mobilephone", tb.getMobilephone());
  jo.put("receivetime", ToolBox.getYMDHMS(tb.getReceivetime()));
  jo.put("tradetype", clsConst.TRADE_TYPE_DES[tb.getTradetype()]);
  jo.put("changestatus", (tb.getChangestatus()!=0)?"成功":"失败");
  jo.put("sendstatus", (tb.getSendstatus()!=0)?"成功":"失败");
  jo.put("bill_credit", String.format("%1.2f",tb.getBill_credit()/100.0));
   jo.put("changes",String.format("%1.2f",tb.getChanges()/100.0));
  jo.put("goodroadid", tb.getGoodroadid());
  jo.put("SmsContent", tb.getSmsContent());
  jo.put("orderid", tb.getOrderid());
  jo.put("goodsName", tb.getGoodsName());
  jo.put("inneridname", tb.getInneridname());
  jo.put("xmlstr", tb.getXmlstr());
  
  jsonData.add(jo);
 }
 int TotalCount=SqlADO.getTradeRowsCount(sql);
 JSONObject jsonObject=new JSONObject();
 jsonObject.put("rows", jsonData);//JSONArray
 jsonObject.put("total",TotalCount);//总记录数
 out.print(jsonObject.toString()); <br>...

 5、分页界面内容介绍

JS组件Bootstrap Table使用方法详解

前端获取分页数据,代码如下:

...<br>oTableInit.queryParams = function (params) {
  var temp = { //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
  limit: params.limit, //第几条记录
  offset: params.offset, //显示一页多少记录
  sdate: $("#stratTime").val(),
 
  };
  return temp;
 };<br>...

 后端获取分页数据,代码如下:

...<br>int pageindex=0;
int offset = ToolBox.filterInt(json1.getString("offset"));
int limit = ToolBox.filterInt(json1.getString("limit")); 
if(offset !=0){
 pageindex = offset/limit;
}
 pageindex+= 1;//第几页<br>...

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

以上就是为大家分享的Bootstrap Table使用方法,希望对大家熟练掌握Bootstrap Table使用方法有所帮助。

Javascript 相关文章推荐
实现连缀调用的map方法(prototype)
Aug 05 Javascript
XENON基于JSON变种
Jul 27 Javascript
SlideView 图片滑动(扩展/收缩)展示效果
Aug 01 Javascript
jQuery的DOM操作之删除节点示例
Jan 03 Javascript
js怎么判断flash swf文件是否加载完毕
Aug 14 Javascript
基于Node.js实现nodemailer邮件发送
Jan 26 Javascript
AngularJs Modules详解及示例代码
Sep 01 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
Dec 19 Javascript
利用jqprint插件打印页面内容的实现方法
Jan 09 Javascript
JS实现区分中英文并统计字符个数的方法示例
Jun 09 Javascript
vue实现图片懒加载的方法分析
Feb 05 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
Jul 22 Javascript
Node.js实现JS文件合并小工具
Feb 02 #Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
Feb 02 #Javascript
JavaScript通过代码调用Flash显示的方法
Feb 02 #Javascript
AngularJS中$interval的用法详解
Feb 02 #Javascript
AngularJS中处理多个promise的方式
Feb 02 #Javascript
AngularJS数据源的多种获取方式汇总
Feb 02 #Javascript
多种JQuery循环滚动文字图片效果代码
Jun 23 #Javascript
You might like
php弹出对话框实现重定向代码
2014/01/23 PHP
PHP使用imagick扩展实现合并图像的方法
2017/04/25 PHP
js对table的td进行相同内容合并示例详解
2013/12/27 Javascript
JSON中双引号的轮回使用过程中一定要小心
2014/03/05 Javascript
jquery滚动到顶部底部代码
2015/04/20 Javascript
jQuery实现的向下图文信息滚动效果
2015/05/03 Javascript
如何防止JavaScript自动插入分号
2015/11/05 Javascript
针对BootStrap中tabs控件的美化和完善(推荐)
2016/07/06 Javascript
Angularjs的ng-repeat中去除重复数据的方法
2016/08/05 Javascript
仿iframe效果Aajx文件上传实例
2016/11/18 Javascript
解析AngularJS中get请求URL出现的跨域问题
2016/12/01 Javascript
基于pako.js实现gzip的压缩和解压功能示例
2017/06/13 Javascript
bootstrap select下拉搜索插件使用方法详解
2017/11/23 Javascript
详解vue填坑之解决部分浏览器不支持pushState方法
2018/07/12 Javascript
vue.js自定义组件directives的实例代码
2018/11/09 Javascript
微信小程序的线程架构【推荐】
2019/05/14 Javascript
js的Object.assign用法示例分析
2020/03/05 Javascript
VUE动态生成word的实现
2020/07/26 Javascript
JavaScript中的函数式编程详解
2020/08/22 Javascript
11个Python3字典内置方法大全与示例汇总
2019/05/13 Python
python的内存管理和垃圾回收机制详解
2019/05/18 Python
一篇文章弄懂Python中的可迭代对象、迭代器和生成器
2019/08/12 Python
python3 dict ndarray 存成json,并保留原数据精度的实例
2019/12/06 Python
python 解压、复制、删除 文件的实例代码
2020/02/26 Python
Python实现转换图片背景颜色代码
2020/04/30 Python
Python如何使用正则表达式爬取京东商品信息
2020/06/01 Python
在pycharm中使用matplotlib.pyplot 绘图时报错的解决
2020/06/01 Python
谈谈python垃圾回收机制
2020/09/27 Python
python3实现名片管理系统(控制台版)
2020/11/29 Python
阿迪达斯加拿大官网:Adidas加拿大
2016/08/25 全球购物
Spanx塑身衣官网:美国知名内衣品牌
2017/01/11 全球购物
GafasWorld哥伦比亚:网上购买眼镜
2017/11/28 全球购物
机电一体化专业毕业生自荐信
2014/06/19 职场文书
家长通知书家长意见
2014/12/30 职场文书
测量JavaScript函数的性能各种方式对比
2021/04/27 Javascript
HTML5之高度塌陷问题的解决
2022/06/01 HTML / CSS