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 相关文章推荐
javascript引用对象的方法
Jan 11 Javascript
jQuery EasyUI 的EasyLoader功能介绍
Sep 12 Javascript
jquery监控数据是否变化(修正版)
Apr 12 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
Jan 29 Javascript
分享JavaScript与Java中MD5使用两个例子
Dec 23 Javascript
js简单判断flash是否加载完成的方法
Jun 21 Javascript
jQuery中绑定事件bind() on() live() one()的异同
Feb 23 Javascript
js编写选项卡效果
May 23 Javascript
webpack打包js文件及部署的实现方法
Dec 18 Javascript
jQuery中each遍历的三种方法实例分析
Sep 07 jQuery
基于mpvue小程序使用echarts画折线图的方法示例
Apr 24 Javascript
canvas多重阴影发光效果实现
Apr 20 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
火影忍者:三大瞳力之一的白眼,为什么没有写轮眼那么出色?
2020/03/02 日漫
PHP 中英文混合排版中处理字符串常用的函数
2007/04/12 PHP
PHP大批量数据操作时临时调整内存与执行时间的方法
2011/04/20 PHP
php中get_cfg_var()和ini_get()的用法及区别
2015/03/04 PHP
php中实现用数组妩媚地生成要执行的sql语句
2015/07/10 PHP
PHP的消息通信机制测试实例
2016/11/10 PHP
js form 验证函数 当前比较流行的错误提示
2009/06/23 Javascript
jQuery DOM操作小结与实例
2010/01/07 Javascript
JQuery autocomplete 使用手册
2010/04/01 Javascript
jquery插件之easing 动态菜单
2010/08/21 Javascript
网络之美 JavaScript中Get和Set访问器的实现代码
2010/09/19 Javascript
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
2011/04/27 Javascript
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
2013/05/28 Javascript
JQuery日期插件datepicker的使用方法
2016/03/03 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
2017/03/21 Javascript
Spring boot 和Vue开发中CORS跨域问题解决
2018/09/05 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
2018/09/17 Javascript
Bootstrap的aria-label和aria-labelledby属性实例详解
2018/11/02 Javascript
Mpvue中使用Vant Weapp组件库的方法步骤
2019/05/16 Javascript
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
2020/07/27 Javascript
Vue中ref和$refs的介绍以及使用方法示例
2021/01/11 Vue.js
在CentOS上配置Nginx+Gunicorn+Python+Flask环境的教程
2016/06/07 Python
Python实现希尔排序算法的原理与用法实例分析
2017/11/23 Python
Pytorch中accuracy和loss的计算知识点总结
2019/09/10 Python
解决python运行效率不高的问题
2020/07/20 Python
python中封包建立过程实例
2021/02/18 Python
详解CSS3中强大的filter(滤镜)属性
2017/06/29 HTML / CSS
canvas实现飞机打怪兽射击小游戏的示例代码
2018/07/09 HTML / CSS
MADE法国:提供原创设计师家具
2018/09/18 全球购物
ASP.NET中的身份验证有那些
2012/07/13 面试题
项目投资建议书
2014/05/16 职场文书
技术员岗位职责
2015/02/04 职场文书
法务专员岗位职责
2015/02/14 职场文书
创建文明城市倡议书
2015/04/28 职场文书
Python入门之使用pandas分析excel数据
2021/05/12 Python
漫画「古见同学有交流障碍症」第25卷封面公开
2022/03/21 日漫