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的图片幻灯展示源码
Jul 15 Javascript
程序员必知35个jQuery 代码片段
Nov 05 Javascript
JS对HTML表格进行增删改操作
Aug 22 Javascript
通过JS获取Request.QueryString()参数的值实现方法
Sep 27 Javascript
JS Select下拉框(支持输入模糊查询)
Feb 04 Javascript
微信小程序 this和that详解及简单实例
Feb 13 Javascript
JavaScript原生数组Array常用方法
Apr 06 Javascript
switchery按钮的使用方法
Dec 18 Javascript
JavaScript实现的文本框placeholder提示文字功能示例
Jul 25 Javascript
微信小程序搭建自己的Https服务器
May 02 Javascript
package.json配置文件构成详解
Aug 27 Javascript
vue的项目如何打包上线
Apr 13 Vue.js
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
vBulletin HACK----显示话题大小和打开新窗口于论坛索引页
2006/10/09 PHP
坏狼的PHP学习教程之第2天
2008/06/15 PHP
php下载远程文件类(支持断点续传)
2008/11/14 PHP
关于PHP5 Session生命周期介绍
2010/03/02 PHP
php结合ajax实现赞、顶、踩功能实例
2014/05/12 PHP
Thinkphp+smarty+uploadify实现无刷新上传
2015/07/30 PHP
php 将json格式数据转换成数组的方法
2018/08/21 PHP
js动态添加删除,后台取数据(示例代码)
2013/11/25 Javascript
JavaScript中合并数组的N种方法
2014/09/16 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
2016/10/10 Javascript
用jQuery的AJax实现异步访问、异步加载
2016/11/02 Javascript
ajax接收后台数据在html页面显示
2017/02/19 Javascript
使用百度地图实现地图网格的示例
2018/02/06 Javascript
详解ES6中的Map与Set集合
2019/03/22 Javascript
JS严格模式原理与用法实例分析
2020/04/27 Javascript
小程序瀑布流组件实现翻页与图片懒加载
2020/05/19 Javascript
jQuery 隐藏/显示效果函数用法实例分析
2020/05/20 jQuery
vue实现点击出现操作弹出框的示例
2020/11/05 Javascript
[04:19]DOTA2完美大师赛第四天精彩集锦
2017/11/26 DOTA
简单了解Python读取大文件代码实例
2019/12/18 Python
python和pywin32实现窗口查找、遍历和点击的示例代码
2020/04/01 Python
python matplotlib.pyplot.plot()参数用法
2020/04/14 Python
matplotlib部件之套索Lasso的使用
2021/02/24 Python
全球性的在线时尚男装零售商:boohooMAN
2016/12/17 全球购物
巴西网上药店:Drogaria Araujo
2021/01/06 全球购物
办公室保洁员岗位职责
2013/12/02 职场文书
快餐公司创业计划书
2014/04/29 职场文书
行政专员求职信范文
2014/05/03 职场文书
优秀电子工程系毕业生求职信
2014/05/24 职场文书
竞赛口号大全
2014/06/16 职场文书
中国文明网向国旗敬礼活动精彩寄语2014
2014/09/27 职场文书
投标人法定代表人授权委托书格式
2014/09/28 职场文书
详解Java实践之适配器模式
2021/06/18 Java/Android
Python 语言实现六大查找算法
2021/06/30 Python
mysql脏页是什么
2021/07/26 MySQL
MySQL运行报错:“Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggre”解决方法
2022/06/14 MySQL