BootStrap table使用方法分析


Posted in Javascript onNovember 08, 2016

本文实例为大家分享了BootStrap table的使用方法,供大家参考,具体内容如下

bootstrap table git address:https://github.com/wenzhixin/bootstrap-table 

引入文件

<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css"/>
<link rel="stylesheet" href="../bower_components/bootstrap-table-develop/dist/bootstrap-table.min.css"/> 
<script type="text/javascript" src="../bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../bower_components/bootstrap-table-develop/dist/bootstrap-table.js"></script>
<script type="text/javascript" src="../bower_components/bootstrap-table-develop/dist/locale/bootstrap-table-zh-CN.js"></script>

使用方式

<table data-toggle="table" data-url="data.json">
  <thead>
  ... 
  </thead>
</table>

or

<table id="table" class="mychar1-table"></table>
$('#table').bootstrapTable({
  url: 'data.json' 
 });

第二种更好理解点:

var $table = $('#mychart1');
$table.bootstrapTable({
url: reqprojectname_w+'list/spectrumlist', 
dataType: "json",
toolbar: '#toolbar',  //工具按钮用哪个容器
striped: true,   //是否显示行间隔色
singleSelect: false,
pagination: true, //分页
pageNumber:1,   //初始化加载第一页,默认第一页
pageSize: 10,   //每页的记录行数(*)
pageList: [10, 25, 50, 100], //可供选择的每页的行数(*)
search: false, //显示搜索框
sidePagination: "server", //服务端处理分页
 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: '出货'
 },
  {
   title: '操作',
   field: 'id',
   align: 'center',
   formatter:function(value,row,index){ 
   var e = '<a href="#" mce_href="#" onclick="edit(\''+ row.id + '\')">编辑</a> '; 
   var d = '<a href="#" mce_href="#" onclick="del(\''+ row.id +'\')">删除</a> '; 
   return e+d; 
  } 
  }
  ]
 });

详细介绍

$(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;
 };

请求参数

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

后台拼装测试数据

JSONArray jsonData=new JSONArray();
 JSONObject jo=null;
 for (int i=0,len=10;i<len;i++){
  jo=new JSONObject();
  jo.put("id", i+(j++));
  jo.put("liushuiid", i+1);
  jo.put("price", 100);
  jo.put("mobilephone",10);
  jo.put("receivetime", 10);
  jo.put("tradetype", 10);
  jo.put("changestatus", "成功");
  jo.put("sendstatus", "失败");
  jo.put("bill_credit", 10);
  jo.put("goodroadid", 10);
  jo.put("SmsContent", 10);
  jo.put("orderid", 10);
  jo.put("goodsName", 10);
  jo.put("inneridname", 10);
  jo.put("xmlstr", 10);
  jsonData.add(jo);
 }
 int TotalCount=97;
 JSONObject jsonObject=new JSONObject();
 jsonObject.put("rows", jsonData);//JSONArray
 jsonObject.put("total",TotalCount);//总记录数

分页接收

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>...

分页时BootStrap table 向后端传递两个分页字段:limit, offset ,前者表示每页的个数,默认为10个,后者表示分页时数据的偏移量。

而搜索时则向后端传递的是search字段,表示具体的搜索内容。

服务器端返回的数据中还要包括page(页数),total(数据总量)两个字段,前端要根据这两个字段分页。

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

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

Javascript 相关文章推荐
JQuery 写的个性导航菜单
Dec 24 Javascript
javascript hashtable 修正版 下载
Dec 30 Javascript
动态添加删除表格行的js实现代码
Feb 28 Javascript
js实现键盘控制DIV移动的方法
Jan 10 Javascript
JavaScript+html5 canvas实现本地截图教程
Apr 16 Javascript
浅谈js中子页面父页面方法 变量相互调用
Aug 04 Javascript
轻松掌握JavaScript单例模式
Aug 25 Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
Oct 10 Javascript
js原生Ajax的封装和原理详解
Mar 11 Javascript
Vue.js 事件修饰符的使用教程
Nov 01 Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
JS实现排行榜文字向上滚动轮播效果
Nov 26 Javascript
bootstrap监听滚动实现头部跟随滚动
Nov 08 #Javascript
AngularJS学习笔记(三)数据双向绑定的简单实例
Nov 08 #Javascript
bootstrapfileinput实现文件自动上传
Nov 08 #Javascript
JS实现探测网站链接的方法【测试可用】
Nov 08 #Javascript
AngularJS+Bootstrap实现多文件上传与管理
Nov 08 #Javascript
AngularJS压缩JS技巧分析
Nov 08 #Javascript
jQuery的Read()方法代替原生JS详解
Nov 08 #Javascript
You might like
php调用google接口生成二维码示例
2014/04/28 PHP
php mb_substr()函数截取中文字符串应用示例
2014/07/29 PHP
PHP实现导出excel数据的类库用法示例
2016/10/15 PHP
脚本之家贴图转换+转贴工具用到的js代码超级推荐
2007/04/05 Javascript
基于jQuery的表格操作插件
2010/04/22 Javascript
css与javascript跨浏览器兼容性总结
2014/09/15 Javascript
JavaScript中使用typeof运算符需要注意的几个坑
2014/11/08 Javascript
javascript实现一个网页加载进度loading
2017/01/04 Javascript
微信小程序图表插件(wx-charts)实例代码
2017/01/17 Javascript
JS动态修改网页body的背景色实例代码
2017/10/07 Javascript
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
2018/05/03 Javascript
vue中当图片地址无效的时候,显示默认图片的方法
2018/09/18 Javascript
详解适配器在JavaScript中的体现
2018/09/28 Javascript
Javascript读写cookie的实例源码
2019/03/16 Javascript
vue实现分页加载效果
2019/12/24 Javascript
九步学会Python装饰器
2015/05/09 Python
python使用线程封装的一个简单定时器类实例
2015/05/16 Python
python实现感知器算法详解
2017/12/19 Python
python将文本中的空格替换为换行的方法
2018/03/19 Python
Flask Web开发入门之文件上传(八)
2018/08/17 Python
python爬虫神器Pyppeteer入门及使用
2019/07/13 Python
python实现12306登录并保存cookie的方法示例
2019/12/17 Python
python深copy和浅copy区别对比解析
2019/12/26 Python
使用Python爬取弹出窗口信息的实例
2020/03/14 Python
python em算法的实现
2020/10/03 Python
Stefania Mode英国:奢华设计师和时尚服装
2017/10/23 全球购物
荷兰在线啤酒店:Beerwulf
2019/08/26 全球购物
澳大利亚最便宜的网上药房:Chemist Warehouse
2020/01/30 全球购物
C#笔试题
2015/07/14 面试题
历史专业毕业生的自我鉴定
2013/11/15 职场文书
党员干部形式主义个人整改措施
2014/09/17 职场文书
出资证明书范本(标准版)
2014/09/24 职场文书
离婚协议书的范本
2015/01/27 职场文书
2015年小学美术工作总结
2015/05/25 职场文书
2016党员学习作风建设心得体会
2016/01/21 职场文书
AndroidStudio图片压缩工具ImgCompressPlugin使用实例
2022/08/05 Java/Android