JS表格组件神器bootstrap table详解(强化版)


Posted in Javascript onMay 26, 2016

一、Bootstrap Table的引入

关于Bootstrap Table的引入,一般来说还是两种方法:

1、直接下载源码,添加到项目里面来。
由于Bootstrap Table是Bootstrap的一个组件,所以它是依赖Bootstrap的,我们首先需要添加Bootstrap的引用。

2、使用我们神奇的Nuget
打开Nuget,搜索这两个包

JS表格组件神器bootstrap table详解(强化版)

Bootstrap已经是最新的3.3.5了,我们直接安装即可。

JS表格组件神器bootstrap table详解(强化版)

而Bootstrap Table的版本竟然是0.4,这也太坑爹了。所以博主建议Bootstrap Table的包就直接在源码里面去下载吧。Bootstrap Table最新的版本好像是1.9.0。

本文背景引入:

最近客户提出需求,想将原有的管理系统,做下优化,通过手机也能很好展现,想到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>...

 四、其他

bootstrap3 兼容IE8浏览器!查看文章:https://3water.com/article/83366.htm

如果还没有学习够的话大家可以点击这里进行学习,再为大家附一个精彩的专题:Bootstrap学习教程

以上就是本文的全部内容,希望能够帮助大家更好的学习JS表格组件神器bootstrap table。

Javascript 相关文章推荐
关于event.cancelBubble和event.stopPropagation()的区别介绍
Dec 11 Javascript
JS动态改变表格边框宽度的方法
Mar 31 Javascript
js简单设置与使用cookie的方法
Jan 22 Javascript
RequireJS简易绘图程序开发
Oct 28 Javascript
微信小程序 获取相册照片实例详解
Nov 16 Javascript
JS实现的五级联动菜单效果完整实例
Feb 23 Javascript
JavaScript门面模式详解
Oct 19 Javascript
详解如何在Vue里建立长按指令
Aug 20 Javascript
分享vue里swiper的一些坑
Aug 30 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
Jan 08 Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
vue 使用lodash实现对象数组深拷贝操作
Sep 10 Javascript
JS在一定时间内跳转页面及各种刷新页面的实现方法
May 26 #Javascript
JavaScript的String字符串对象常用操作总结
May 26 #Javascript
jquery.form.js框架实现文件上传功能案例解析(springmvc)
May 26 #Javascript
jQuery过滤特殊字符及JS字符串转为数字
May 26 #Javascript
Bootstrap自定义文件上传下载样式
May 26 #Javascript
jQuery控制文本框只能输入数字和字母及使用方法
May 26 #Javascript
JavaScript中0和&quot;&quot;比较引发的问题
May 26 #Javascript
You might like
php中二分法查找算法实例分析
2016/09/22 PHP
yii2.0整合阿里云oss的示例代码
2017/09/19 PHP
解决Laravel5.5下的toArray问题
2019/10/15 PHP
用javascript实现的激活输入框后隐藏初始内容
2007/06/29 Javascript
jQuery插件 tabBox实现代码
2010/02/09 Javascript
百度移动版的url编码解码示例
2014/04/29 Javascript
js函数定时器实现定时读取系统实时连接数
2014/04/30 Javascript
JavaScript判断textarea值是否为空并给出相应提示
2014/09/04 Javascript
js+css实现上下翻页相册代码分享
2015/08/18 Javascript
跟我学习javascript的函数调用和构造函数调用
2015/11/16 Javascript
AngularJS 让人爱不释手的八种功能
2016/03/23 Javascript
jquery对象访问是什么及使用方法介绍
2016/05/03 Javascript
EasyUI在表单提交之前进行验证的实例代码
2016/06/24 Javascript
JS框架之vue.js(深入三:组件1)
2016/09/29 Javascript
使用webpack-dev-server处理跨域请求的方法
2018/04/18 Javascript
用Python脚本生成Android SALT扰码的方法
2013/09/18 Python
使用Python的Flask框架表单插件Flask-WTF实现Web登录验证
2016/07/12 Python
Python编程给numpy矩阵添加一列方法示例
2017/12/04 Python
python 实现登录网页的操作方法
2018/05/11 Python
python使用tornado实现简单爬虫
2018/07/28 Python
关于Pycharm无法debug问题的总结
2019/01/19 Python
Python3.5以上版本lxml导入etree报错的解决方案
2019/06/26 Python
在django中,关于session的通用设置方法
2019/08/06 Python
Python实现微信翻译机器人的方法
2019/08/13 Python
Python 根据数据模板创建shapefile的实现
2019/11/26 Python
Python BeautifulReport可视化报告代码实例
2020/04/13 Python
浅谈keras2 predict和fit_generator的坑
2020/06/17 Python
戴尔新加坡官网:Dell Singapore
2020/12/13 全球购物
后勤副校长自我鉴定
2013/10/13 职场文书
四个太阳教学反思
2014/02/01 职场文书
人事经理岗位职责
2014/04/28 职场文书
计算机毕业生求职信
2014/06/10 职场文书
法学求职信
2014/06/22 职场文书
行政处罚事先告知书
2015/07/01 职场文书
化工生产实习心得体会
2016/01/22 职场文书
教你使用pyinstaller打包Python教程
2021/05/27 Python