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 Event学习第二章 Event浏览器兼容性
Feb 07 Javascript
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
Sep 30 Javascript
JavaScript中的Web worker多线程API研究
Dec 06 Javascript
JavaScript使用cookie实现记住账号密码功能
Apr 27 Javascript
jQuery实现判断滚动条到底部
Jun 23 Javascript
js实现选中页面文字将其分享到新浪微博
Nov 05 Javascript
AngularJS入门教程之Scope(作用域)
Jul 27 Javascript
js表单元素checked、radio被选中的几种方法(详解)
Aug 22 Javascript
js实现不提示直接关闭网页窗口
Mar 30 Javascript
详解vue 兼容IE报错解决方案
Dec 29 Javascript
JavaScript实现多个物体同时运动
Mar 12 Javascript
JavaScript 俄罗斯方块游戏实现方法与代码解释
Apr 08 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
收音机指标测试方法及仪器
2021/03/01 无线电
详解PHP实现执行定时任务
2015/12/21 PHP
100多行PHP代码实现socks5代理服务器[2]
2016/05/05 PHP
php服务器的系统详解
2019/10/12 PHP
javascript读取xml
2006/11/04 Javascript
在IE模态窗口中自由查看HTML源码的方法
2007/03/08 Javascript
textarea中的手动换行处理的jquery代码
2011/02/26 Javascript
Jquery中显示隐藏的实现代码分析
2011/07/26 Javascript
js indexOf()定义和用法
2012/10/21 Javascript
让AJAX不依赖后端接口实现方案
2012/12/03 Javascript
js实现两个值相加alert出来精确到指定位
2013/09/25 Javascript
ie浏览器使用js导出网页到excel并打印
2014/03/11 Javascript
js日期联动示例
2014/05/02 Javascript
Bootstrap3 模态框使用实例
2017/02/22 Javascript
利用vscode调试编译后的js代码详解
2018/05/14 Javascript
Vue.js图片预览插件使用详解
2018/08/27 Javascript
微信小程序 生成携带参数的二维码
2019/10/23 Javascript
jQuery实现计算器功能
2020/10/19 jQuery
在Django框架中设置语言偏好的教程
2015/07/27 Python
sublime text 3配置使用python操作方法
2017/06/11 Python
pandas进行时间数据的转换和计算时间差并提取年月日
2019/07/06 Python
Python jieba库用法及实例解析
2019/11/04 Python
如何学习Python time模块
2020/06/03 Python
python中封包建立过程实例
2021/02/18 Python
德国古洛迷亚百货官网:GALERIA Kaufhof
2017/06/20 全球购物
阿波罗盒子:Apollo Box
2017/08/14 全球购物
EJB3推出JPA的原因
2013/10/16 面试题
校三好学生主要事迹
2014/01/11 职场文书
数学检讨书1000字
2014/02/24 职场文书
房屋转让协议书范本
2014/04/11 职场文书
桥梁工程专业求职信
2014/04/21 职场文书
驻村工作先进事迹
2014/08/14 职场文书
教师正风肃纪剖析材料
2014/10/20 职场文书
综合办公室岗位职责
2015/04/11 职场文书
车间班组长竞聘书
2015/09/15 职场文书
Win10 最新稳定版本 21H2开始推送
2022/04/19 数码科技