Bootstrap table简单使用总结


Posted in Javascript onFebruary 15, 2017

最近接触一个很棒的插件,Bootstrap table没做过前端的表示对table的印象还只停留在html的table标签那一套,用过bootstrap table之后不得不说真的很实用。

构造方式

1 、HTML

<div class="btn-group hidden-xs"id="exampleTableEventsToolbar" >
 //定义一系列工具栏...
 </div>
<table data-toggle="table"
 data-url="${ctxAdmin}/user/userData?orgId=${orgId}" //table数据来源,json格式
 data-pagination="true" //是否支持分页
 data-show-search="true" //是否显示搜索框功能
 data-show-columns="true" //显示columns功能按钮
 data-icon-size="outline" 
 data-mobile-responsive="true"
 data-height="500" 
 id="tablelist"
 data-side-pagination="server" //支持服务器端分页,默认是client>
 <thead>
 <tr>
 <th data-field="user_id">ID</th>
 <th data-field="username" 
  data-formatter="usernameFormatter" //columns option 参见官网解释
  data-events="usernameEvents">用户名</th>
 <th data-field="real_name">真实姓名</th>
 <th data-field="tel_num">座机</th>
 <th data-field="mobile">手机</th>
 <th data-field="user_type">用户类型</th>
 <th data-field="operation" 
  data-formatter="actionFormatter"
  data-events="actionEvents">操作</th>
 </tr>
 </thead>
</table>

 2 、 js构造:

(function() {
 $('#tablelist').bootstrapTable({
  url: "${ctxAdmin}/user/userData?orgId=${orgId}",
  search: true, //是否显示搜索框功能
  pagination: true, //是否分页
  showRefresh: true, //是否显示刷新功能 
  showToggle: true,
  showColumns: true,
  iconSize: 'outline',
  // toolbar: '#exampleTableEventsToolbar', 可以在table上方显示的一条工具栏,
  icons: {
  refresh: 'glyphicon-repeat',
  toggle: 'glyphicon-list-alt',
  columns: 'glyphicon-list'
  }
 });

 结合官网上展示的Table options,Column options,Events,Methods可以完成很多功能。上面的data-formatter ,data-events就是Column options中的选项 。

data-formatter data-events

要实现如下效果,用上面两个option配合使用即可,一个定义格式,一个定义点击的操作。

Bootstrap table简单使用总结

直接上js代码

//value: 所在collumn的当前显示值,
 //row:整个行的数据 ,对象化,可通过.获取
  //表格-操作 - 格式化 
 function actionFormatter(value, row, index) {
  return '<a class="mod" >修改</a> ' + '<a class="delete">删除</a>';
 }
 //表格 - 操作 - 事件
 window.actionEvents = {
  'click .mod': function(e, value, row, index) {  
    //修改操作
   },
  'click .delete' : function(e, value, row, index) {
    //删除操作 
   }
  }

服务器分页/客户端分页的转换,table刷新

bootstrap默认是客户端分页 ,可通过html标签

data-side-pagination:"client"

 或者js中的

sidePagination: 'server'

指定。注意这两种后台传过来的json数据格式也不一样
client : 正常的json array格式 [{},{},{}]
server:{“total”:0,”rows”:[]} 其中total表示查询的所有数据条数,后面的rows是指当前页面展示的数据量。

有事需要根据情况改变分页方式,就要用到Methods中的
‘refreshOptions' //设置更新时候的options
‘refresh' //设置更新时的url ,query(往后台传参数)

$("#tablelist").bootstrapTable('refreshOptions', {
  sidePagination: 'client' //改为客户端分页
    });
 $("#tablelist").bootstrapTable('refresh', {
   url: "${ctxAdmin}/user/getsearchuserinfo", //重设数据来源
   query: {username: $('#sea-username').val(),realname: $("#sea-realname").val(),mobile: $("#sea-mobile").val()}

  //传到后台的参数
 });

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

Javascript 相关文章推荐
JavaScript null和undefined区别分析
Oct 14 Javascript
JS循环遍历JSON数据的方法
Jul 08 Javascript
jquery结合CSS使用validate实现漂亮的验证
Jan 29 Javascript
轻松5句话解决JavaScript的作用域
Jul 15 Javascript
基于百度地图实现产品销售的单位位置查看功能设计与实现
Oct 21 Javascript
JavaScript伪数组用法实例分析
Dec 22 Javascript
详解jQuery中的easyui
Sep 02 jQuery
React和Vue中监听变量变化的方法
Nov 14 Javascript
express框架下使用session的方法
Jul 31 Javascript
细说webpack6 Babel的使用详解
Sep 26 Javascript
原生JS实现多条件筛选
Aug 19 Javascript
简单聊聊Vue中的计算属性和属性侦听
Oct 05 Vue.js
原生js轮播(仿慕课网)
Feb 15 #Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
Feb 15 #Javascript
Canvas实现放射线动画效果
Feb 15 #Javascript
微信小程序 开发经验整理
Feb 15 #Javascript
bootstrap table操作技巧分享
Feb 15 #Javascript
利用n 升级工具升级Node.js版本及在mac环境下的坑
Feb 15 #Javascript
JS原型与原型链的深入理解
Feb 15 #Javascript
You might like
关于手调机和数调机的选择
2021/03/02 无线电
很温暖很温暖的Lester Young
2021/03/03 冲泡冲煮
一个简单的PHP投票程序源码
2007/03/11 PHP
PHP字符串中特殊符号的过滤方法介绍
2014/02/18 PHP
深入理解PHP内核(二)之SAPI探究
2015/11/10 PHP
PHP常见漏洞攻击分析
2016/02/21 PHP
用JavaScript编写COM组件的步骤
2009/03/17 Javascript
jquery动态加载js三种方法实例
2013/08/03 Javascript
Javascript实现滚动图片新闻的实例代码
2013/11/27 Javascript
jQuery实现鼠标划过修改样式的方法
2015/04/14 Javascript
浅谈angular懒加载的一些坑
2016/08/20 Javascript
浅谈Vue的基本应用
2016/12/27 Javascript
nodejs进阶(6)—连接MySQL数据库示例
2017/01/07 NodeJs
AngularJS自定义表单验证功能实例详解
2018/08/24 Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
2018/09/04 Javascript
微信小程序onLaunch异步,首页onLoad先执行?
2018/09/20 Javascript
详解ES6系列之私有变量的实现
2018/11/21 Javascript
react 组件传值的三种方法
2019/06/03 Javascript
用Python实现web端用户登录和注册功能的教程
2015/04/30 Python
python任务调度实例分析
2015/05/19 Python
为Python的Tornado框架配置使用Jinja2模板引擎的方法
2016/06/30 Python
Python爬虫包 BeautifulSoup  递归抓取实例详解
2017/01/28 Python
安装python时MySQLdb报错的问题描述及解决方法
2018/03/20 Python
Python使用爬虫抓取美女图片并保存到本地的方法【测试可用】
2018/08/30 Python
Python画图实现同一结点多个柱状图的示例
2019/07/07 Python
PyQt5使用QTimer实现电子时钟
2019/07/29 Python
解决python 文本过滤和清理问题
2019/08/28 Python
Python实现ATM系统
2020/02/17 Python
Keras Convolution1D与Convolution2D区别说明
2020/05/22 Python
基于django micro搭建网站实现加水印功能
2020/05/22 Python
英国独特礼物想法和个性化礼物网站:notonthehighstreet.com
2018/04/16 全球购物
西班牙用户之间买卖视频游戏的平台:Wakkap
2020/03/21 全球购物
财务会计专业应届毕业生求职信
2013/10/18 职场文书
户籍证明模板
2014/09/28 职场文书
终止劳动合同证明书样本
2014/11/19 职场文书
如何制定一份可行的计划!
2019/06/21 职场文书