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 DIV弹出效果实现代码
Jul 03 Javascript
TreeView 用法(有代码)(asp.net)
Jul 15 Javascript
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
Feb 03 Javascript
根据选择不同的下拉值出现相对应的文本输入框
Aug 01 Javascript
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
Nov 21 Javascript
javascript定义变量时加var与不加var的区别
Dec 22 Javascript
js实现数字递增特效【仿支付宝我的财富】
May 05 Javascript
深入理解Vue transition源码分析
Jul 30 Javascript
详解node单线程实现高并发原理与node异步I/O
Sep 21 Javascript
关于react中组件通信的几种方式详解
Dec 10 Javascript
vue(2.x,3.0)配置跨域代理
Nov 27 Javascript
angular8.5集成TinyMce5的使用和详细配置(推荐)
Nov 16 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编程过程中需要了解的this,self,parent的区别
2009/12/30 PHP
PHP判断手机是IOS还是Android
2015/12/09 PHP
如何使用php等比例缩放图片
2016/10/12 PHP
老生常谈php 正则中的i,m,s,x,e分别表示什么
2017/03/02 PHP
PHP文件系统管理(实例讲解)
2017/09/19 PHP
firefox火狐浏览器与与ie兼容的2个问题总结
2010/07/20 Javascript
JS图片根据鼠标滚动延时加载的实例代码
2013/07/13 Javascript
js判断选择的时间是否大于今天的代码
2013/08/20 Javascript
浅谈javascript中return语句
2015/07/15 Javascript
Javascript实现单例模式
2016/01/24 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
2016/05/27 Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
2016/08/05 Javascript
JavaScript仿聊天室聊天记录
2016/12/27 Javascript
无法获取隐藏元素宽度和高度的解决方案
2017/03/07 Javascript
React-router 4 按需加载的实现方式及原理详解
2017/05/25 Javascript
javascript  删除select中的所有option的实例
2017/09/17 Javascript
JS学习笔记之贪吃蛇小游戏demo实例详解
2019/05/29 Javascript
解决layui下拉框监听问题(监听不到值的变化)
2019/09/28 Javascript
jQuery实现的解析本地 XML 文档操作示例
2020/04/30 jQuery
Python读取excel指定列生成指定sql脚本的方法
2018/11/28 Python
Python迭代器模块itertools使用原理解析
2019/12/11 Python
python进行参数传递的方法
2020/05/12 Python
win10下python3.8的PIL库安装过程
2020/06/08 Python
tensorflow使用CNN分析mnist手写体数字数据集
2020/06/17 Python
python使用隐式循环快速求和的实现示例
2020/09/11 Python
如何让IE9以下版本(ie6/7/8)认识html5元素
2013/04/01 HTML / CSS
HTML5画渐变背景图片并自动下载实现步骤
2013/11/18 HTML / CSS
关于HTML5语义标签的实践(blog页面)
2016/07/12 HTML / CSS
文员的职业生涯规划发展方向
2014/02/08 职场文书
国际贸易毕业生求职信范文
2014/02/21 职场文书
2015年父亲节活动总结
2015/02/12 职场文书
岗位聘任报告
2015/03/02 职场文书
2015年驾驶员工作总结
2015/04/29 职场文书
诚实守信主题班会
2015/08/13 职场文书
JavaScript 实现页面滚动动画
2021/04/24 Javascript